@taiga-ui/kit
Version:
Taiga UI Angular main components kit
75 lines • 8.59 kB
JavaScript
import { __decorate } from "tslib";
import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';
import { tuiDefaultProp, tuiRequiredSetter } from '@taiga-ui/cdk';
import { sizeBigger } from '@taiga-ui/core';
import { stringHashToHsl } from '@taiga-ui/kit/utils/format';
let TuiAvatarComponent = class TuiAvatarComponent {
constructor() {
this.size = 'm';
this.text = '';
this.autoColor = false;
this.rounded = false;
this.avatarUrl = null;
this.isUrlValid = false;
}
set avatarUrlSetter(avatarUrl) {
this.isUrlValid = !!avatarUrl;
this.avatarUrl = avatarUrl;
}
get bgColor() {
return this.autoColor ? stringHashToHsl(this.text) : '';
}
get hasAvatar() {
return this.avatarUrl !== null && this.isUrlValid;
}
get computedText() {
if (this.hasAvatar || this.text === '') {
return '';
}
const words = this.text.split(' ');
return words.length > 1 && sizeBigger(this.size)
? words[0].substr(0, 1) + words[1].substr(0, 1)
: words[0].substr(0, 1);
}
onError() {
this.isUrlValid = false;
}
};
__decorate([
Input(),
HostBinding('attr.data-tui-host-size'),
tuiDefaultProp()
], TuiAvatarComponent.prototype, "size", void 0);
__decorate([
Input('avatarUrl'),
tuiRequiredSetter()
], TuiAvatarComponent.prototype, "avatarUrlSetter", null);
__decorate([
Input(),
tuiDefaultProp()
], TuiAvatarComponent.prototype, "text", void 0);
__decorate([
Input(),
tuiDefaultProp()
], TuiAvatarComponent.prototype, "autoColor", void 0);
__decorate([
Input(),
HostBinding('class._rounded'),
tuiDefaultProp()
], TuiAvatarComponent.prototype, "rounded", void 0);
__decorate([
HostBinding('style.background')
], TuiAvatarComponent.prototype, "bgColor", null);
__decorate([
HostBinding('class._has-avatar')
], TuiAvatarComponent.prototype, "hasAvatar", null);
TuiAvatarComponent = __decorate([
Component({
selector: 'tui-avatar',
changeDetection: ChangeDetectionStrategy.OnPush,
template: "<img\n *ngIf=\"isUrlValid\"\n class=\"image\"\n loading=\"lazy\"\n [attr.alt]=\"text\"\n [src]=\"avatarUrl\"\n (error)=\"onError()\"\n/>\n<span class=\"text\">{{computedText}}</span>\n",
styles: [":host{position:relative;display:flex;flex-shrink:0;border-radius:var(--tui-radius-m);color:var(--tui-secondary-active);text-align:center;text-transform:uppercase;justify-content:center;align-items:center;background-color:currentColor;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;overflow:hidden}:host[data-tui-host-size=xs]{font:var(--tui-font-text-s);width:24px;height:24px}:host[data-tui-host-size='s']{font:var(--tui-font-text-m);width:32px;height:32px}:host[data-tui-host-size='m']{font:var(--tui-font-text-l);width:48px;height:48px}:host[data-tui-host-size='l']{font:var(--tui-font-heading-5);width:64px;height:64px;border-radius:var(--tui-radius-l)}:host[data-tui-host-size=xl]{font:var(--tui-font-heading-3);width:96px;height:96px;border-radius:var(--tui-radius-l)}:host[data-tui-host-size=xxl]{font:var(--tui-font-heading-1);width:144px;height:144px;border-radius:var(--tui-radius-l)}:host._has-avatar{background-color:transparent}:host._rounded{border-radius:100%}.image{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.text{color:var(--tui-text-01)}"]
})
], TuiAvatarComponent);
export { TuiAvatarComponent };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXZhdGFyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL0B0YWlnYS11aS9raXQvY29tcG9uZW50cy9hdmF0YXIvIiwic291cmNlcyI6WyJhdmF0YXIuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQUMsdUJBQXVCLEVBQUUsU0FBUyxFQUFFLFdBQVcsRUFBRSxLQUFLLEVBQUMsTUFBTSxlQUFlLENBQUM7QUFDckYsT0FBTyxFQUFDLGNBQWMsRUFBRSxpQkFBaUIsRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUNoRSxPQUFPLEVBQUMsVUFBVSxFQUF3QixNQUFNLGdCQUFnQixDQUFDO0FBQ2pFLE9BQU8sRUFBQyxlQUFlLEVBQUMsTUFBTSw0QkFBNEIsQ0FBQztBQVEzRCxJQUFhLGtCQUFrQixHQUEvQixNQUFhLGtCQUFrQjtJQUEvQjtRQUlJLFNBQUksR0FBMkIsR0FBRyxDQUFDO1FBV25DLFNBQUksR0FBRyxFQUFFLENBQUM7UUFJVixjQUFTLEdBQUcsS0FBSyxDQUFDO1FBS2xCLFlBQU8sR0FBRyxLQUFLLENBQUM7UUFFaEIsY0FBUyxHQUFrQixJQUFJLENBQUM7UUFFaEMsZUFBVSxHQUFHLEtBQUssQ0FBQztJQTJCdkIsQ0FBQztJQS9DRyxJQUFJLGVBQWUsQ0FBQyxTQUF3QjtRQUN4QyxJQUFJLENBQUMsVUFBVSxHQUFHLENBQUMsQ0FBQyxTQUFTLENBQUM7UUFDOUIsSUFBSSxDQUFDLFNBQVMsR0FBRyxTQUFTLENBQUM7SUFDL0IsQ0FBQztJQW9CRCxJQUFJLE9BQU87UUFDUCxPQUFPLElBQUksQ0FBQyxTQUFTLENBQUMsQ0FBQyxDQUFDLGVBQWUsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQztJQUM1RCxDQUFDO0lBR0QsSUFBSSxTQUFTO1FBQ1QsT0FBTyxJQUFJLENBQUMsU0FBUyxLQUFLLElBQUksSUFBSSxJQUFJLENBQUMsVUFBVSxDQUFDO0lBQ3RELENBQUM7SUFFRCxJQUFJLFlBQVk7UUFDWixJQUFJLElBQUksQ0FBQyxTQUFTLElBQUksSUFBSSxDQUFDLElBQUksS0FBSyxFQUFFLEVBQUU7WUFDcEMsT0FBTyxFQUFFLENBQUM7U0FDYjtRQUVELE1BQU0sS0FBSyxHQUFHLElBQUksQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLEdBQUcsQ0FBQyxDQUFDO1FBRW5DLE9BQU8sS0FBSyxDQUFDLE1BQU0sR0FBRyxDQUFDLElBQUksVUFBVSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUM7WUFDNUMsQ0FBQyxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsQ0FBQyxNQUFNLENBQUMsQ0FBQyxFQUFFLENBQUMsQ0FBQyxHQUFHLEtBQUssQ0FBQyxDQUFDLENBQUMsQ0FBQyxNQUFNLENBQUMsQ0FBQyxFQUFFLENBQUMsQ0FBQztZQUMvQyxDQUFDLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxDQUFDLEVBQUUsQ0FBQyxDQUFDLENBQUM7SUFDaEMsQ0FBQztJQUVELE9BQU87UUFDSCxJQUFJLENBQUMsVUFBVSxHQUFHLEtBQUssQ0FBQztJQUM1QixDQUFDO0NBQ0osQ0FBQTtBQW5ERztJQUhDLEtBQUssRUFBRTtJQUNQLFdBQVcsQ0FBQyx5QkFBeUIsQ0FBQztJQUN0QyxjQUFjLEVBQUU7Z0RBQ2tCO0FBSW5DO0lBRkMsS0FBSyxDQUFDLFdBQVcsQ0FBQztJQUNsQixpQkFBaUIsRUFBRTt5REFJbkI7QUFJRDtJQUZDLEtBQUssRUFBRTtJQUNQLGNBQWMsRUFBRTtnREFDUDtBQUlWO0lBRkMsS0FBSyxFQUFFO0lBQ1AsY0FBYyxFQUFFO3FEQUNDO0FBS2xCO0lBSEMsS0FBSyxFQUFFO0lBQ1AsV0FBVyxDQUFDLGdCQUFnQixDQUFDO0lBQzdCLGNBQWMsRUFBRTttREFDRDtBQU9oQjtJQURDLFdBQVcsQ0FBQyxrQkFBa0IsQ0FBQztpREFHL0I7QUFHRDtJQURDLFdBQVcsQ0FBQyxtQkFBbUIsQ0FBQzttREFHaEM7QUF0Q1Esa0JBQWtCO0lBTjlCLFNBQVMsQ0FBQztRQUNQLFFBQVEsRUFBRSxZQUFZO1FBQ3RCLGVBQWUsRUFBRSx1QkFBdUIsQ0FBQyxNQUFNO1FBQy9DLHNOQUFxQzs7S0FFeEMsQ0FBQztHQUNXLGtCQUFrQixDQXVEOUI7U0F2RFksa0JBQWtCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBIb3N0QmluZGluZywgSW5wdXR9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHt0dWlEZWZhdWx0UHJvcCwgdHVpUmVxdWlyZWRTZXR0ZXJ9IGZyb20gJ0B0YWlnYS11aS9jZGsnO1xuaW1wb3J0IHtzaXplQmlnZ2VyLCBUdWlTaXplWFMsIFR1aVNpemVYWEx9IGZyb20gJ0B0YWlnYS11aS9jb3JlJztcbmltcG9ydCB7c3RyaW5nSGFzaFRvSHNsfSBmcm9tICdAdGFpZ2EtdWkva2l0L3V0aWxzL2Zvcm1hdCc7XG5cbkBDb21wb25lbnQoe1xuICAgIHNlbGVjdG9yOiAndHVpLWF2YXRhcicsXG4gICAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gICAgdGVtcGxhdGVVcmw6ICcuL2F2YXRhci50ZW1wbGF0ZS5odG1sJyxcbiAgICBzdHlsZVVybHM6IFsnLi9hdmF0YXIuc3R5bGUubGVzcyddLFxufSlcbmV4cG9ydCBjbGFzcyBUdWlBdmF0YXJDb21wb25lbnQge1xuICAgIEBJbnB1dCgpXG4gICAgQEhvc3RCaW5kaW5nKCdhdHRyLmRhdGEtdHVpLWhvc3Qtc2l6ZScpXG4gICAgQHR1aURlZmF1bHRQcm9wKClcbiAgICBzaXplOiBUdWlTaXplWFMgfCBUdWlTaXplWFhMID0gJ20nO1xuXG4gICAgQElucHV0KCdhdmF0YXJVcmwnKVxuICAgIEB0dWlSZXF1aXJlZFNldHRlcigpXG4gICAgc2V0IGF2YXRhclVybFNldHRlcihhdmF0YXJVcmw6IHN0cmluZyB8IG51bGwpIHtcbiAgICAgICAgdGhpcy5pc1VybFZhbGlkID0gISFhdmF0YXJVcmw7XG4gICAgICAgIHRoaXMuYXZhdGFyVXJsID0gYXZhdGFyVXJsO1xuICAgIH1cblxuICAgIEBJbnB1dCgpXG4gICAgQHR1aURlZmF1bHRQcm9wKClcbiAgICB0ZXh0ID0gJyc7XG5cbiAgICBASW5wdXQoKVxuICAgIEB0dWlEZWZhdWx0UHJvcCgpXG4gICAgYXV0b0NvbG9yID0gZmFsc2U7XG5cbiAgICBASW5wdXQoKVxuICAgIEBIb3N0QmluZGluZygnY2xhc3MuX3JvdW5kZWQnKVxuICAgIEB0dWlEZWZhdWx0UHJvcCgpXG4gICAgcm91bmRlZCA9IGZhbHNlO1xuXG4gICAgYXZhdGFyVXJsOiBzdHJpbmcgfCBudWxsID0gbnVsbDtcblxuICAgIGlzVXJsVmFsaWQgPSBmYWxzZTtcblxuICAgIEBIb3N0QmluZGluZygnc3R5bGUuYmFja2dyb3VuZCcpXG4gICAgZ2V0IGJnQ29sb3IoKTogc3RyaW5nIHtcbiAgICAgICAgcmV0dXJuIHRoaXMuYXV0b0NvbG9yID8gc3RyaW5nSGFzaFRvSHNsKHRoaXMudGV4dCkgOiAnJztcbiAgICB9XG5cbiAgICBASG9zdEJpbmRpbmcoJ2NsYXNzLl9oYXMtYXZhdGFyJylcbiAgICBnZXQgaGFzQXZhdGFyKCk6IGJvb2xlYW4ge1xuICAgICAgICByZXR1cm4gdGhpcy5hdmF0YXJVcmwgIT09IG51bGwgJiYgdGhpcy5pc1VybFZhbGlkO1xuICAgIH1cblxuICAgIGdldCBjb21wdXRlZFRleHQoKTogc3RyaW5nIHtcbiAgICAgICAgaWYgKHRoaXMuaGFzQXZhdGFyIHx8IHRoaXMudGV4dCA9PT0gJycpIHtcbiAgICAgICAgICAgIHJldHVybiAnJztcbiAgICAgICAgfVxuXG4gICAgICAgIGNvbnN0IHdvcmRzID0gdGhpcy50ZXh0LnNwbGl0KCcgJyk7XG5cbiAgICAgICAgcmV0dXJuIHdvcmRzLmxlbmd0aCA+IDEgJiYgc2l6ZUJpZ2dlcih0aGlzLnNpemUpXG4gICAgICAgICAgICA/IHdvcmRzWzBdLnN1YnN0cigwLCAxKSArIHdvcmRzWzFdLnN1YnN0cigwLCAxKVxuICAgICAgICAgICAgOiB3b3Jkc1swXS5zdWJzdHIoMCwgMSk7XG4gICAgfVxuXG4gICAgb25FcnJvcigpIHtcbiAgICAgICAgdGhpcy5pc1VybFZhbGlkID0gZmFsc2U7XG4gICAgfVxufVxuIl19