@taiga-ui/kit/fesm2015/taiga-ui-kit-components-avatar.js

Taiga UI Angular main components kit

import { __decorate } from 'tslib';
import { Input, HostBinding, Component, ChangeDetectionStrategy, NgModule } from '@angular/core';
import { tuiDefaultProp, tuiRequiredSetter } from '@taiga-ui/cdk';
import { sizeBigger } from '@taiga-ui/core';
import { stringHashToHsl } from '@taiga-ui/kit/utils/format';
import { CommonModule } from '@angular/common';
import { TuiLazyLoadingModule } from '@taiga-ui/kit/directives';

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);

let TuiAvatarModule = class TuiAvatarModule {
};
TuiAvatarModule = __decorate([
    NgModule({
        imports: [CommonModule, TuiLazyLoadingModule],
        declarations: [TuiAvatarComponent],
        exports: [TuiAvatarComponent],
    })
], TuiAvatarModule);

/**
 * Generated bundle index. Do not edit.
 */

export { TuiAvatarComponent, TuiAvatarModule };
//# sourceMappingURL=taiga-ui-kit-components-avatar.js.map