@taiga-ui/kit
Version:
Taiga UI Angular main components kit
92 lines • 9.51 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';
var TuiAvatarComponent = /** @class */ (function () {
function TuiAvatarComponent() {
this.size = 'm';
this.text = '';
this.autoColor = false;
this.rounded = false;
this.avatarUrl = null;
this.isUrlValid = false;
}
Object.defineProperty(TuiAvatarComponent.prototype, "avatarUrlSetter", {
set: function (avatarUrl) {
this.isUrlValid = !!avatarUrl;
this.avatarUrl = avatarUrl;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiAvatarComponent.prototype, "bgColor", {
get: function () {
return this.autoColor ? stringHashToHsl(this.text) : '';
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiAvatarComponent.prototype, "hasAvatar", {
get: function () {
return this.avatarUrl !== null && this.isUrlValid;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiAvatarComponent.prototype, "computedText", {
get: function () {
if (this.hasAvatar || this.text === '') {
return '';
}
var 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);
},
enumerable: true,
configurable: true
});
TuiAvatarComponent.prototype.onError = function () {
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);
return TuiAvatarComponent;
}());
export { TuiAvatarComponent };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXZhdGFyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL0B0YWlnYS11aS9raXQvY29tcG9uZW50cy9hdmF0YXIvIiwic291cmNlcyI6WyJhdmF0YXIuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQUMsdUJBQXVCLEVBQUUsU0FBUyxFQUFFLFdBQVcsRUFBRSxLQUFLLEVBQUMsTUFBTSxlQUFlLENBQUM7QUFDckYsT0FBTyxFQUFDLGNBQWMsRUFBRSxpQkFBaUIsRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUNoRSxPQUFPLEVBQUMsVUFBVSxFQUF3QixNQUFNLGdCQUFnQixDQUFDO0FBQ2pFLE9BQU8sRUFBQyxlQUFlLEVBQUMsTUFBTSw0QkFBNEIsQ0FBQztBQVEzRDtJQUFBO1FBSUksU0FBSSxHQUEyQixHQUFHLENBQUM7UUFXbkMsU0FBSSxHQUFHLEVBQUUsQ0FBQztRQUlWLGNBQVMsR0FBRyxLQUFLLENBQUM7UUFLbEIsWUFBTyxHQUFHLEtBQUssQ0FBQztRQUVoQixjQUFTLEdBQWtCLElBQUksQ0FBQztRQUVoQyxlQUFVLEdBQUcsS0FBSyxDQUFDO0lBMkJ2QixDQUFDO0lBL0NHLHNCQUFJLCtDQUFlO2FBQW5CLFVBQW9CLFNBQXdCO1lBQ3hDLElBQUksQ0FBQyxVQUFVLEdBQUcsQ0FBQyxDQUFDLFNBQVMsQ0FBQztZQUM5QixJQUFJLENBQUMsU0FBUyxHQUFHLFNBQVMsQ0FBQztRQUMvQixDQUFDOzs7T0FBQTtJQW9CRCxzQkFBSSx1Q0FBTzthQUFYO1lBQ0ksT0FBTyxJQUFJLENBQUMsU0FBUyxDQUFDLENBQUMsQ0FBQyxlQUFlLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsQ0FBQyxFQUFFLENBQUM7UUFDNUQsQ0FBQzs7O09BQUE7SUFHRCxzQkFBSSx5Q0FBUzthQUFiO1lBQ0ksT0FBTyxJQUFJLENBQUMsU0FBUyxLQUFLLElBQUksSUFBSSxJQUFJLENBQUMsVUFBVSxDQUFDO1FBQ3RELENBQUM7OztPQUFBO0lBRUQsc0JBQUksNENBQVk7YUFBaEI7WUFDSSxJQUFJLElBQUksQ0FBQyxTQUFTLElBQUksSUFBSSxDQUFDLElBQUksS0FBSyxFQUFFLEVBQUU7Z0JBQ3BDLE9BQU8sRUFBRSxDQUFDO2FBQ2I7WUFFRCxJQUFNLEtBQUssR0FBRyxJQUFJLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxHQUFHLENBQUMsQ0FBQztZQUVuQyxPQUFPLEtBQUssQ0FBQyxNQUFNLEdBQUcsQ0FBQyxJQUFJLFVBQVUsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDO2dCQUM1QyxDQUFDLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxDQUFDLEVBQUUsQ0FBQyxDQUFDLEdBQUcsS0FBSyxDQUFDLENBQUMsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxDQUFDLEVBQUUsQ0FBQyxDQUFDO2dCQUMvQyxDQUFDLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxDQUFDLEVBQUUsQ0FBQyxDQUFDLENBQUM7UUFDaEMsQ0FBQzs7O09BQUE7SUFFRCxvQ0FBTyxHQUFQO1FBQ0ksSUFBSSxDQUFDLFVBQVUsR0FBRyxLQUFLLENBQUM7SUFDNUIsQ0FBQztJQWxERDtRQUhDLEtBQUssRUFBRTtRQUNQLFdBQVcsQ0FBQyx5QkFBeUIsQ0FBQztRQUN0QyxjQUFjLEVBQUU7b0RBQ2tCO0lBSW5DO1FBRkMsS0FBSyxDQUFDLFdBQVcsQ0FBQztRQUNsQixpQkFBaUIsRUFBRTs2REFJbkI7SUFJRDtRQUZDLEtBQUssRUFBRTtRQUNQLGNBQWMsRUFBRTtvREFDUDtJQUlWO1FBRkMsS0FBSyxFQUFFO1FBQ1AsY0FBYyxFQUFFO3lEQUNDO0lBS2xCO1FBSEMsS0FBSyxFQUFFO1FBQ1AsV0FBVyxDQUFDLGdCQUFnQixDQUFDO1FBQzdCLGNBQWMsRUFBRTt1REFDRDtJQU9oQjtRQURDLFdBQVcsQ0FBQyxrQkFBa0IsQ0FBQztxREFHL0I7SUFHRDtRQURDLFdBQVcsQ0FBQyxtQkFBbUIsQ0FBQzt1REFHaEM7SUF0Q1Esa0JBQWtCO1FBTjlCLFNBQVMsQ0FBQztZQUNQLFFBQVEsRUFBRSxZQUFZO1lBQ3RCLGVBQWUsRUFBRSx1QkFBdUIsQ0FBQyxNQUFNO1lBQy9DLHNOQUFxQzs7U0FFeEMsQ0FBQztPQUNXLGtCQUFrQixDQXVEOUI7SUFBRCx5QkFBQztDQUFBLEFBdkRELElBdURDO1NBdkRZLGtCQUFrQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7Q2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgSG9zdEJpbmRpbmcsIElucHV0fSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7dHVpRGVmYXVsdFByb3AsIHR1aVJlcXVpcmVkU2V0dGVyfSBmcm9tICdAdGFpZ2EtdWkvY2RrJztcbmltcG9ydCB7c2l6ZUJpZ2dlciwgVHVpU2l6ZVhTLCBUdWlTaXplWFhMfSBmcm9tICdAdGFpZ2EtdWkvY29yZSc7XG5pbXBvcnQge3N0cmluZ0hhc2hUb0hzbH0gZnJvbSAnQHRhaWdhLXVpL2tpdC91dGlscy9mb3JtYXQnO1xuXG5AQ29tcG9uZW50KHtcbiAgICBzZWxlY3RvcjogJ3R1aS1hdmF0YXInLFxuICAgIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICAgIHRlbXBsYXRlVXJsOiAnLi9hdmF0YXIudGVtcGxhdGUuaHRtbCcsXG4gICAgc3R5bGVVcmxzOiBbJy4vYXZhdGFyLnN0eWxlLmxlc3MnXSxcbn0pXG5leHBvcnQgY2xhc3MgVHVpQXZhdGFyQ29tcG9uZW50IHtcbiAgICBASW5wdXQoKVxuICAgIEBIb3N0QmluZGluZygnYXR0ci5kYXRhLXR1aS1ob3N0LXNpemUnKVxuICAgIEB0dWlEZWZhdWx0UHJvcCgpXG4gICAgc2l6ZTogVHVpU2l6ZVhTIHwgVHVpU2l6ZVhYTCA9ICdtJztcblxuICAgIEBJbnB1dCgnYXZhdGFyVXJsJylcbiAgICBAdHVpUmVxdWlyZWRTZXR0ZXIoKVxuICAgIHNldCBhdmF0YXJVcmxTZXR0ZXIoYXZhdGFyVXJsOiBzdHJpbmcgfCBudWxsKSB7XG4gICAgICAgIHRoaXMuaXNVcmxWYWxpZCA9ICEhYXZhdGFyVXJsO1xuICAgICAgICB0aGlzLmF2YXRhclVybCA9IGF2YXRhclVybDtcbiAgICB9XG5cbiAgICBASW5wdXQoKVxuICAgIEB0dWlEZWZhdWx0UHJvcCgpXG4gICAgdGV4dCA9ICcnO1xuXG4gICAgQElucHV0KClcbiAgICBAdHVpRGVmYXVsdFByb3AoKVxuICAgIGF1dG9Db2xvciA9IGZhbHNlO1xuXG4gICAgQElucHV0KClcbiAgICBASG9zdEJpbmRpbmcoJ2NsYXNzLl9yb3VuZGVkJylcbiAgICBAdHVpRGVmYXVsdFByb3AoKVxuICAgIHJvdW5kZWQgPSBmYWxzZTtcblxuICAgIGF2YXRhclVybDogc3RyaW5nIHwgbnVsbCA9IG51bGw7XG5cbiAgICBpc1VybFZhbGlkID0gZmFsc2U7XG5cbiAgICBASG9zdEJpbmRpbmcoJ3N0eWxlLmJhY2tncm91bmQnKVxuICAgIGdldCBiZ0NvbG9yKCk6IHN0cmluZyB7XG4gICAgICAgIHJldHVybiB0aGlzLmF1dG9Db2xvciA/IHN0cmluZ0hhc2hUb0hzbCh0aGlzLnRleHQpIDogJyc7XG4gICAgfVxuXG4gICAgQEhvc3RCaW5kaW5nKCdjbGFzcy5faGFzLWF2YXRhcicpXG4gICAgZ2V0IGhhc0F2YXRhcigpOiBib29sZWFuIHtcbiAgICAgICAgcmV0dXJuIHRoaXMuYXZhdGFyVXJsICE9PSBudWxsICYmIHRoaXMuaXNVcmxWYWxpZDtcbiAgICB9XG5cbiAgICBnZXQgY29tcHV0ZWRUZXh0KCk6IHN0cmluZyB7XG4gICAgICAgIGlmICh0aGlzLmhhc0F2YXRhciB8fCB0aGlzLnRleHQgPT09ICcnKSB7XG4gICAgICAgICAgICByZXR1cm4gJyc7XG4gICAgICAgIH1cblxuICAgICAgICBjb25zdCB3b3JkcyA9IHRoaXMudGV4dC5zcGxpdCgnICcpO1xuXG4gICAgICAgIHJldHVybiB3b3Jkcy5sZW5ndGggPiAxICYmIHNpemVCaWdnZXIodGhpcy5zaXplKVxuICAgICAgICAgICAgPyB3b3Jkc1swXS5zdWJzdHIoMCwgMSkgKyB3b3Jkc1sxXS5zdWJzdHIoMCwgMSlcbiAgICAgICAgICAgIDogd29yZHNbMF0uc3Vic3RyKDAsIDEpO1xuICAgIH1cblxuICAgIG9uRXJyb3IoKSB7XG4gICAgICAgIHRoaXMuaXNVcmxWYWxpZCA9IGZhbHNlO1xuICAgIH1cbn1cbiJdfQ==