@taiga-ui/kit
Version:
Taiga UI Angular main components kit
59 lines • 13.5 kB
JavaScript
import { NgIf } from '@angular/common';
import { ChangeDetectionStrategy, Component, inject, Input } from '@angular/core';
import { tuiIsString } from '@taiga-ui/cdk/utils/miscellaneous';
import { tuiAppearanceOptionsProvider, TuiWithAppearance, } from '@taiga-ui/core/directives/appearance';
import { TuiIcons } from '@taiga-ui/core/directives/icons';
import { TUI_AVATAR_OPTIONS } from './avatar.options';
import * as i0 from "@angular/core";
import * as i1 from "@taiga-ui/core/directives/appearance";
import * as i2 from "@taiga-ui/core/directives/icons";
class TuiAvatar {
constructor() {
this.options = inject(TUI_AVATAR_OPTIONS);
this.size = this.options.size;
this.round = this.options.round;
}
get value() {
return this.src || '';
}
get svg() {
return tuiIsString(this.value) && this.value.endsWith('.svg');
}
get type() {
if (this.value && !tuiIsString(this.value)) {
return 'img';
}
if (this.value.startsWith('@tui.')) {
return 'icon';
}
if (this.value.length > 0 && this.value.length < 3) {
return 'text';
}
return this.value.length ? 'img' : 'content';
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiAvatar, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiAvatar, isStandalone: true, selector: "tui-avatar,button[tuiAvatar],a[tuiAvatar]", inputs: { size: "size", round: "round", src: "src" }, host: { properties: { "attr.data-size": "size", "attr.data-type": "type", "class._round": "round", "class._svg": "svg" } }, providers: [tuiAppearanceOptionsProvider(TUI_AVATAR_OPTIONS)], hostDirectives: [{ directive: i1.TuiWithAppearance }, { directive: i2.TuiIcons, inputs: ["iconStart", "src"] }], ngImport: i0, template: "<img\n *ngIf=\"type === 'img'\"\n alt=\"\"\n loading=\"lazy\"\n [src]=\"value\"\n/>\n<ng-container *ngIf=\"type === 'text'\">{{ value }}</ng-container>\n<ng-content />\n", styles: [":host{--t-size: 3.5rem;--t-radius: .75rem;position:relative;display:inline-flex;flex-shrink:0;inline-size:var(--t-size);block-size:var(--t-size);align-items:center;justify-content:center;white-space:nowrap;border-radius:var(--t-radius);border:none;background:var(--tui-background-neutral-1);color:var(--tui-text-secondary);vertical-align:middle;box-sizing:border-box;padding:.25rem;opacity:.999}:host[data-size=xs]{--t-size: var(--tui-height-xs);--t-radius: .5rem;font:var(--tui-font-text-xs);font-weight:700}:host[data-size=xs][data-type=content]{font:var(--tui-font-text-m);font-size:.5625rem}:host[data-size=s]{--t-size: var(--tui-height-s);--t-radius: .5rem;font:var(--tui-font-text-s);font-weight:700}:host[data-size=s][data-type=content]{font:var(--tui-font-text-xs);font-weight:700}:host[data-size=m]{--t-size: calc(var(--tui-height-m) - .25rem);--t-radius: .75rem;font:var(--tui-font-text-l);font-weight:700}:host[data-size=m][data-type=content]{font:var(--tui-font-text-m);font-weight:700}:host[data-size=l]{--t-size: var(--tui-height-l);--t-radius: .75rem;font:var(--tui-font-heading-5)}:host[data-size=l][data-type=content]{font:var(--tui-font-text-l);font-weight:700}:host[data-size=xl]{--t-size: 5rem;--t-radius: .75rem;font:var(--tui-font-heading-3)}:host[data-size=xl][data-type=content]{font:var(--tui-font-heading-4)}:host[data-size=xxl]{--t-size: 6rem;--t-radius: 1rem;font:var(--tui-font-heading-3)}:host[data-size=xxl][data-type=content]{font:var(--tui-font-heading-3)}:host[data-size=xxxl]{--t-size: 8rem;--t-radius: 1.25rem;font:var(--tui-font-heading-2)}:host[data-size=xxxl][data-type=content]{font:var(--tui-font-heading-3)}:host[data-type]:before{display:none}:host[data-type=img]:not(._svg){background:transparent}:host[data-type=icon]:before{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);content:\"\";display:block;inline-size:60%;block-size:60%}:host._round{--t-radius: calc(var(--t-size) / 2)}:host._svg img{padding:20%;object-fit:contain}:host ::ng-deep img,:host ::ng-deep picture,:host ::ng-deep video{position:absolute;top:0;left:0;inline-size:100%;block-size:100%;object-fit:cover;box-sizing:border-box;border-radius:inherit}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
export { TuiAvatar };
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiAvatar, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'tui-avatar,button[tuiAvatar],a[tuiAvatar]', imports: [NgIf], changeDetection: ChangeDetectionStrategy.OnPush, providers: [tuiAppearanceOptionsProvider(TUI_AVATAR_OPTIONS)], hostDirectives: [
TuiWithAppearance,
{
directive: TuiIcons,
inputs: ['iconStart: src'],
},
], host: {
'[attr.data-size]': 'size',
'[attr.data-type]': 'type',
'[class._round]': 'round',
'[class._svg]': 'svg',
}, template: "<img\n *ngIf=\"type === 'img'\"\n alt=\"\"\n loading=\"lazy\"\n [src]=\"value\"\n/>\n<ng-container *ngIf=\"type === 'text'\">{{ value }}</ng-container>\n<ng-content />\n", styles: [":host{--t-size: 3.5rem;--t-radius: .75rem;position:relative;display:inline-flex;flex-shrink:0;inline-size:var(--t-size);block-size:var(--t-size);align-items:center;justify-content:center;white-space:nowrap;border-radius:var(--t-radius);border:none;background:var(--tui-background-neutral-1);color:var(--tui-text-secondary);vertical-align:middle;box-sizing:border-box;padding:.25rem;opacity:.999}:host[data-size=xs]{--t-size: var(--tui-height-xs);--t-radius: .5rem;font:var(--tui-font-text-xs);font-weight:700}:host[data-size=xs][data-type=content]{font:var(--tui-font-text-m);font-size:.5625rem}:host[data-size=s]{--t-size: var(--tui-height-s);--t-radius: .5rem;font:var(--tui-font-text-s);font-weight:700}:host[data-size=s][data-type=content]{font:var(--tui-font-text-xs);font-weight:700}:host[data-size=m]{--t-size: calc(var(--tui-height-m) - .25rem);--t-radius: .75rem;font:var(--tui-font-text-l);font-weight:700}:host[data-size=m][data-type=content]{font:var(--tui-font-text-m);font-weight:700}:host[data-size=l]{--t-size: var(--tui-height-l);--t-radius: .75rem;font:var(--tui-font-heading-5)}:host[data-size=l][data-type=content]{font:var(--tui-font-text-l);font-weight:700}:host[data-size=xl]{--t-size: 5rem;--t-radius: .75rem;font:var(--tui-font-heading-3)}:host[data-size=xl][data-type=content]{font:var(--tui-font-heading-4)}:host[data-size=xxl]{--t-size: 6rem;--t-radius: 1rem;font:var(--tui-font-heading-3)}:host[data-size=xxl][data-type=content]{font:var(--tui-font-heading-3)}:host[data-size=xxxl]{--t-size: 8rem;--t-radius: 1.25rem;font:var(--tui-font-heading-2)}:host[data-size=xxxl][data-type=content]{font:var(--tui-font-heading-3)}:host[data-type]:before{display:none}:host[data-type=img]:not(._svg){background:transparent}:host[data-type=icon]:before{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);content:\"\";display:block;inline-size:60%;block-size:60%}:host._round{--t-radius: calc(var(--t-size) / 2)}:host._svg img{padding:20%;object-fit:contain}:host ::ng-deep img,:host ::ng-deep picture,:host ::ng-deep video{position:absolute;top:0;left:0;inline-size:100%;block-size:100%;object-fit:cover;box-sizing:border-box;border-radius:inherit}\n"] }]
}], propDecorators: { size: [{
type: Input
}], round: [{
type: Input
}], src: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXZhdGFyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2tpdC9jb21wb25lbnRzL2F2YXRhci9hdmF0YXIuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMva2l0L2NvbXBvbmVudHMvYXZhdGFyL2F2YXRhci50ZW1wbGF0ZS5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBQyxJQUFJLEVBQUMsTUFBTSxpQkFBaUIsQ0FBQztBQUNyQyxPQUFPLEVBQUMsdUJBQXVCLEVBQUUsU0FBUyxFQUFFLE1BQU0sRUFBRSxLQUFLLEVBQUMsTUFBTSxlQUFlLENBQUM7QUFFaEYsT0FBTyxFQUFDLFdBQVcsRUFBQyxNQUFNLG1DQUFtQyxDQUFDO0FBQzlELE9BQU8sRUFDSCw0QkFBNEIsRUFDNUIsaUJBQWlCLEdBQ3BCLE1BQU0sc0NBQXNDLENBQUM7QUFDOUMsT0FBTyxFQUFDLFFBQVEsRUFBQyxNQUFNLGlDQUFpQyxDQUFDO0FBRXpELE9BQU8sRUFBQyxrQkFBa0IsRUFBQyxNQUFNLGtCQUFrQixDQUFDOzs7O0FBRXBELE1BdUJhLFNBQVM7SUF2QnRCO1FBd0JxQixZQUFPLEdBQUcsTUFBTSxDQUFDLGtCQUFrQixDQUFDLENBQUM7UUFHL0MsU0FBSSxHQUFHLElBQUksQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDO1FBR3pCLFVBQUssR0FBRyxJQUFJLENBQUMsT0FBTyxDQUFDLEtBQUssQ0FBQztLQTRCckM7SUF2QkcsSUFBYyxLQUFLO1FBQ2YsT0FBTyxJQUFJLENBQUMsR0FBRyxJQUFJLEVBQUUsQ0FBQztJQUMxQixDQUFDO0lBRUQsSUFBYyxHQUFHO1FBQ2IsT0FBTyxXQUFXLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLElBQUksQ0FBQyxLQUFLLENBQUMsUUFBUSxDQUFDLE1BQU0sQ0FBQyxDQUFDO0lBQ2xFLENBQUM7SUFFRCxJQUFjLElBQUk7UUFDZCxJQUFJLElBQUksQ0FBQyxLQUFLLElBQUksQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxFQUFFO1lBQ3hDLE9BQU8sS0FBSyxDQUFDO1NBQ2hCO1FBRUQsSUFBSSxJQUFJLENBQUMsS0FBSyxDQUFDLFVBQVUsQ0FBQyxPQUFPLENBQUMsRUFBRTtZQUNoQyxPQUFPLE1BQU0sQ0FBQztTQUNqQjtRQUVELElBQUksSUFBSSxDQUFDLEtBQUssQ0FBQyxNQUFNLEdBQUcsQ0FBQyxJQUFJLElBQUksQ0FBQyxLQUFLLENBQUMsTUFBTSxHQUFHLENBQUMsRUFBRTtZQUNoRCxPQUFPLE1BQU0sQ0FBQztTQUNqQjtRQUVELE9BQU8sSUFBSSxDQUFDLEtBQUssQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsU0FBUyxDQUFDO0lBQ2pELENBQUM7K0dBbENRLFNBQVM7bUdBQVQsU0FBUywwUUFmUCxDQUFDLDRCQUE0QixDQUFDLGtCQUFrQixDQUFDLENBQUMsMklDcEJqRSx1TEFRQSxnc0VEUWMsSUFBSTs7U0FtQkwsU0FBUzs0RkFBVCxTQUFTO2tCQXZCckIsU0FBUztpQ0FDTSxJQUFJLFlBRU4sMkNBQTJDLFdBQzVDLENBQUMsSUFBSSxDQUFDLG1CQUdFLHVCQUF1QixDQUFDLE1BQU0sYUFDcEMsQ0FBQyw0QkFBNEIsQ0FBQyxrQkFBa0IsQ0FBQyxDQUFDLGtCQUM3Qzt3QkFDWixpQkFBaUI7d0JBQ2pCOzRCQUNJLFNBQVMsRUFBRSxRQUFROzRCQUNuQixNQUFNLEVBQUUsQ0FBQyxnQkFBZ0IsQ0FBQzt5QkFDN0I7cUJBQ0osUUFDSzt3QkFDRixrQkFBa0IsRUFBRSxNQUFNO3dCQUMxQixrQkFBa0IsRUFBRSxNQUFNO3dCQUMxQixnQkFBZ0IsRUFBRSxPQUFPO3dCQUN6QixjQUFjLEVBQUUsS0FBSztxQkFDeEI7OEJBTU0sSUFBSTtzQkFEVixLQUFLO2dCQUlDLEtBQUs7c0JBRFgsS0FBSztnQkFJQyxHQUFHO3NCQURULEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge05nSWZ9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQge0NoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIGluamVjdCwgSW5wdXR9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHR5cGUge1NhZmVSZXNvdXJjZVVybH0gZnJvbSAnQGFuZ3VsYXIvcGxhdGZvcm0tYnJvd3Nlcic7XG5pbXBvcnQge3R1aUlzU3RyaW5nfSBmcm9tICdAdGFpZ2EtdWkvY2RrL3V0aWxzL21pc2NlbGxhbmVvdXMnO1xuaW1wb3J0IHtcbiAgICB0dWlBcHBlYXJhbmNlT3B0aW9uc1Byb3ZpZGVyLFxuICAgIFR1aVdpdGhBcHBlYXJhbmNlLFxufSBmcm9tICdAdGFpZ2EtdWkvY29yZS9kaXJlY3RpdmVzL2FwcGVhcmFuY2UnO1xuaW1wb3J0IHtUdWlJY29uc30gZnJvbSAnQHRhaWdhLXVpL2NvcmUvZGlyZWN0aXZlcy9pY29ucyc7XG5cbmltcG9ydCB7VFVJX0FWQVRBUl9PUFRJT05TfSBmcm9tICcuL2F2YXRhci5vcHRpb25zJztcblxuQENvbXBvbmVudCh7XG4gICAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgICAvLyBUT0RPOiBSZW1vdmUgYHR1aS1hdmF0YXJgIHNlbGVjdG9yIGxlYXZpbmcgb25seSBbdHVpQXZhdGFyXSBpbiB2NVxuICAgIHNlbGVjdG9yOiAndHVpLWF2YXRhcixidXR0b25bdHVpQXZhdGFyXSxhW3R1aUF2YXRhcl0nLFxuICAgIGltcG9ydHM6IFtOZ0lmXSxcbiAgICB0ZW1wbGF0ZVVybDogJy4vYXZhdGFyLnRlbXBsYXRlLmh0bWwnLFxuICAgIHN0eWxlVXJsczogWycuL2F2YXRhci5zdHlsZS5sZXNzJ10sXG4gICAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gICAgcHJvdmlkZXJzOiBbdHVpQXBwZWFyYW5jZU9wdGlvbnNQcm92aWRlcihUVUlfQVZBVEFSX09QVElPTlMpXSxcbiAgICBob3N0RGlyZWN0aXZlczogW1xuICAgICAgICBUdWlXaXRoQXBwZWFyYW5jZSxcbiAgICAgICAge1xuICAgICAgICAgICAgZGlyZWN0aXZlOiBUdWlJY29ucyxcbiAgICAgICAgICAgIGlucHV0czogWydpY29uU3RhcnQ6IHNyYyddLFxuICAgICAgICB9LFxuICAgIF0sXG4gICAgaG9zdDoge1xuICAgICAgICAnW2F0dHIuZGF0YS1zaXplXSc6ICdzaXplJyxcbiAgICAgICAgJ1thdHRyLmRhdGEtdHlwZV0nOiAndHlwZScsXG4gICAgICAgICdbY2xhc3MuX3JvdW5kXSc6ICdyb3VuZCcsXG4gICAgICAgICdbY2xhc3MuX3N2Z10nOiAnc3ZnJyxcbiAgICB9LFxufSlcbmV4cG9ydCBjbGFzcyBUdWlBdmF0YXIge1xuICAgIHByaXZhdGUgcmVhZG9ubHkgb3B0aW9ucyA9IGluamVjdChUVUlfQVZBVEFSX09QVElPTlMpO1xuXG4gICAgQElucHV0KClcbiAgICBwdWJsaWMgc2l6ZSA9IHRoaXMub3B0aW9ucy5zaXplO1xuXG4gICAgQElucHV0KClcbiAgICBwdWJsaWMgcm91bmQgPSB0aGlzLm9wdGlvbnMucm91bmQ7XG5cbiAgICBASW5wdXQoKVxuICAgIHB1YmxpYyBzcmM/OiBTYWZlUmVzb3VyY2VVcmwgfCBzdHJpbmcgfCBudWxsO1xuXG4gICAgcHJvdGVjdGVkIGdldCB2YWx1ZSgpOiBTYWZlUmVzb3VyY2VVcmwgfCBzdHJpbmcge1xuICAgICAgICByZXR1cm4gdGhpcy5zcmMgfHwgJyc7XG4gICAgfVxuXG4gICAgcHJvdGVjdGVkIGdldCBzdmcoKTogYm9vbGVhbiB7XG4gICAgICAgIHJldHVybiB0dWlJc1N0cmluZyh0aGlzLnZhbHVlKSAmJiB0aGlzLnZhbHVlLmVuZHNXaXRoKCcuc3ZnJyk7XG4gICAgfVxuXG4gICAgcHJvdGVjdGVkIGdldCB0eXBlKCk6ICdjb250ZW50JyB8ICdpY29uJyB8ICdpbWcnIHwgJ3RleHQnIHtcbiAgICAgICAgaWYgKHRoaXMudmFsdWUgJiYgIXR1aUlzU3RyaW5nKHRoaXMudmFsdWUpKSB7XG4gICAgICAgICAgICByZXR1cm4gJ2ltZyc7XG4gICAgICAgIH1cblxuICAgICAgICBpZiAodGhpcy52YWx1ZS5zdGFydHNXaXRoKCdAdHVpLicpKSB7XG4gICAgICAgICAgICByZXR1cm4gJ2ljb24nO1xuICAgICAgICB9XG5cbiAgICAgICAgaWYgKHRoaXMudmFsdWUubGVuZ3RoID4gMCAmJiB0aGlzLnZhbHVlLmxlbmd0aCA8IDMpIHtcbiAgICAgICAgICAgIHJldHVybiAndGV4dCc7XG4gICAgICAgIH1cblxuICAgICAgICByZXR1cm4gdGhpcy52YWx1ZS5sZW5ndGggPyAnaW1nJyA6ICdjb250ZW50JztcbiAgICB9XG59XG4iLCI8aW1nXG4gICAgKm5nSWY9XCJ0eXBlID09PSAnaW1nJ1wiXG4gICAgYWx0PVwiXCJcbiAgICBsb2FkaW5nPVwibGF6eVwiXG4gICAgW3NyY109XCJ2YWx1ZVwiXG4vPlxuPG5nLWNvbnRhaW5lciAqbmdJZj1cInR5cGUgPT09ICd0ZXh0J1wiPnt7IHZhbHVlIH19PC9uZy1jb250YWluZXI+XG48bmctY29udGVudCAvPlxuIl19