@taiga-ui/kit
Version:
Taiga UI Angular main components kit
52 lines • 14.1 kB
JavaScript
import { NgSwitch, NgSwitchCase, NgSwitchDefault } from '@angular/common';
import { ChangeDetectionStrategy, Component, inject, Input } from '@angular/core';
import { tuiIsString } from '@taiga-ui/cdk/utils/miscellaneous';
import { TuiIcon } from '@taiga-ui/core/components/icon';
import { tuiAppearanceOptionsProvider, TuiWithAppearance, } from '@taiga-ui/core/directives/appearance';
import { TUI_AVATAR_OPTIONS } from './avatar.options';
import * as i0 from "@angular/core";
import * as i1 from "@taiga-ui/core/directives/appearance";
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 }], ngImport: i0, template: "<ng-container [ngSwitch]=\"type\">\n <img\n *ngSwitchCase=\"'img'\"\n alt=\"\"\n loading=\"lazy\"\n [src]=\"value\"\n />\n <tui-icon\n *ngSwitchCase=\"'icon'\"\n [icon]=\"value.toString()\"\n />\n <ng-container *ngSwitchCase=\"'text'\">{{ value }}</ng-container>\n <ng-container *ngSwitchDefault>\n <ng-content />\n </ng-container>\n</ng-container>\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=img]:not(._svg){background:transparent}:host[data-type=icon]:before{content:\"\"}:host._round{--t-radius: calc(var(--t-size) / 2)}:host._svg img{padding:20%;object-fit:contain}:host tui-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);inline-size:60%;block-size:60%}: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: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: TuiIcon, selector: "tui-icon", inputs: ["icon", "background"] }], 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: [NgSwitch, NgSwitchCase, NgSwitchDefault, TuiIcon], changeDetection: ChangeDetectionStrategy.OnPush, providers: [tuiAppearanceOptionsProvider(TUI_AVATAR_OPTIONS)], hostDirectives: [TuiWithAppearance], host: {
'[attr.data-size]': 'size',
'[attr.data-type]': 'type',
'[class._round]': 'round',
'[class._svg]': 'svg',
}, template: "<ng-container [ngSwitch]=\"type\">\n <img\n *ngSwitchCase=\"'img'\"\n alt=\"\"\n loading=\"lazy\"\n [src]=\"value\"\n />\n <tui-icon\n *ngSwitchCase=\"'icon'\"\n [icon]=\"value.toString()\"\n />\n <ng-container *ngSwitchCase=\"'text'\">{{ value }}</ng-container>\n <ng-container *ngSwitchDefault>\n <ng-content />\n </ng-container>\n</ng-container>\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=img]:not(._svg){background:transparent}:host[data-type=icon]:before{content:\"\"}:host._round{--t-radius: calc(var(--t-size) / 2)}:host._svg img{padding:20%;object-fit:contain}:host tui-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);inline-size:60%;block-size:60%}: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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXZhdGFyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2tpdC9jb21wb25lbnRzL2F2YXRhci9hdmF0YXIuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMva2l0L2NvbXBvbmVudHMvYXZhdGFyL2F2YXRhci50ZW1wbGF0ZS5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBQyxRQUFRLEVBQUUsWUFBWSxFQUFFLGVBQWUsRUFBQyxNQUFNLGlCQUFpQixDQUFDO0FBQ3hFLE9BQU8sRUFBQyx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsTUFBTSxFQUFFLEtBQUssRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUVoRixPQUFPLEVBQUMsV0FBVyxFQUFDLE1BQU0sbUNBQW1DLENBQUM7QUFDOUQsT0FBTyxFQUFDLE9BQU8sRUFBQyxNQUFNLGdDQUFnQyxDQUFDO0FBQ3ZELE9BQU8sRUFDSCw0QkFBNEIsRUFDNUIsaUJBQWlCLEdBQ3BCLE1BQU0sc0NBQXNDLENBQUM7QUFFOUMsT0FBTyxFQUFDLGtCQUFrQixFQUFDLE1BQU0sa0JBQWtCLENBQUM7OztBQUVwRCxNQWdCYSxTQUFTO0lBaEJ0QjtRQWlCcUIsWUFBTyxHQUFHLE1BQU0sQ0FBQyxrQkFBa0IsQ0FBQyxDQUFDO1FBRy9DLFNBQUksR0FBRyxJQUFJLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQztRQUd6QixVQUFLLEdBQUcsSUFBSSxDQUFDLE9BQU8sQ0FBQyxLQUFLLENBQUM7S0E0QnJDO0lBdkJHLElBQWMsS0FBSztRQUNmLE9BQU8sSUFBSSxDQUFDLEdBQUcsSUFBSSxFQUFFLENBQUM7SUFDMUIsQ0FBQztJQUVELElBQWMsR0FBRztRQUNiLE9BQU8sV0FBVyxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsSUFBSSxJQUFJLENBQUMsS0FBSyxDQUFDLFFBQVEsQ0FBQyxNQUFNLENBQUMsQ0FBQztJQUNsRSxDQUFDO0lBRUQsSUFBYyxJQUFJO1FBQ2QsSUFBSSxJQUFJLENBQUMsS0FBSyxJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsRUFBRTtZQUN4QyxPQUFPLEtBQUssQ0FBQztTQUNoQjtRQUVELElBQUksSUFBSSxDQUFDLEtBQUssQ0FBQyxVQUFVLENBQUMsT0FBTyxDQUFDLEVBQUU7WUFDaEMsT0FBTyxNQUFNLENBQUM7U0FDakI7UUFFRCxJQUFJLElBQUksQ0FBQyxLQUFLLENBQUMsTUFBTSxHQUFHLENBQUMsSUFBSSxJQUFJLENBQUMsS0FBSyxDQUFDLE1BQU0sR0FBRyxDQUFDLEVBQUU7WUFDaEQsT0FBTyxNQUFNLENBQUM7U0FDakI7UUFFRCxPQUFPLElBQUksQ0FBQyxLQUFLLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDLFNBQVMsQ0FBQztJQUNqRCxDQUFDOytHQWxDUSxTQUFTO21HQUFULFNBQVMsMFFBVFAsQ0FBQyw0QkFBNEIsQ0FBQyxrQkFBa0IsQ0FBQyxDQUFDLGlGQ25CakUsc2FBZ0JBLDRwRUREYyxRQUFRLDZFQUFFLFlBQVkscUZBQUUsZUFBZSw4REFBRSxPQUFPOztTQWFqRCxTQUFTOzRGQUFULFNBQVM7a0JBaEJyQixTQUFTO2lDQUNNLElBQUksWUFDTiwyQ0FBMkMsV0FDNUMsQ0FBQyxRQUFRLEVBQUUsWUFBWSxFQUFFLGVBQWUsRUFBRSxPQUFPLENBQUMsbUJBRzFDLHVCQUF1QixDQUFDLE1BQU0sYUFDcEMsQ0FBQyw0QkFBNEIsQ0FBQyxrQkFBa0IsQ0FBQyxDQUFDLGtCQUM3QyxDQUFDLGlCQUFpQixDQUFDLFFBQzdCO3dCQUNGLGtCQUFrQixFQUFFLE1BQU07d0JBQzFCLGtCQUFrQixFQUFFLE1BQU07d0JBQzFCLGdCQUFnQixFQUFFLE9BQU87d0JBQ3pCLGNBQWMsRUFBRSxLQUFLO3FCQUN4Qjs4QkFNTSxJQUFJO3NCQURWLEtBQUs7Z0JBSUMsS0FBSztzQkFEWCxLQUFLO2dCQUlDLEdBQUc7c0JBRFQsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7TmdTd2l0Y2gsIE5nU3dpdGNoQ2FzZSwgTmdTd2l0Y2hEZWZhdWx0fSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHtDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBpbmplY3QsIElucHV0fSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB0eXBlIHtTYWZlUmVzb3VyY2VVcmx9IGZyb20gJ0Bhbmd1bGFyL3BsYXRmb3JtLWJyb3dzZXInO1xuaW1wb3J0IHt0dWlJc1N0cmluZ30gZnJvbSAnQHRhaWdhLXVpL2Nkay91dGlscy9taXNjZWxsYW5lb3VzJztcbmltcG9ydCB7VHVpSWNvbn0gZnJvbSAnQHRhaWdhLXVpL2NvcmUvY29tcG9uZW50cy9pY29uJztcbmltcG9ydCB7XG4gICAgdHVpQXBwZWFyYW5jZU9wdGlvbnNQcm92aWRlcixcbiAgICBUdWlXaXRoQXBwZWFyYW5jZSxcbn0gZnJvbSAnQHRhaWdhLXVpL2NvcmUvZGlyZWN0aXZlcy9hcHBlYXJhbmNlJztcblxuaW1wb3J0IHtUVUlfQVZBVEFSX09QVElPTlN9IGZyb20gJy4vYXZhdGFyLm9wdGlvbnMnO1xuXG5AQ29tcG9uZW50KHtcbiAgICBzdGFuZGFsb25lOiB0cnVlLFxuICAgIHNlbGVjdG9yOiAndHVpLWF2YXRhcixidXR0b25bdHVpQXZhdGFyXSxhW3R1aUF2YXRhcl0nLFxuICAgIGltcG9ydHM6IFtOZ1N3aXRjaCwgTmdTd2l0Y2hDYXNlLCBOZ1N3aXRjaERlZmF1bHQsIFR1aUljb25dLFxuICAgIHRlbXBsYXRlVXJsOiAnLi9hdmF0YXIudGVtcGxhdGUuaHRtbCcsXG4gICAgc3R5bGVVcmxzOiBbJy4vYXZhdGFyLnN0eWxlLmxlc3MnXSxcbiAgICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgICBwcm92aWRlcnM6IFt0dWlBcHBlYXJhbmNlT3B0aW9uc1Byb3ZpZGVyKFRVSV9BVkFUQVJfT1BUSU9OUyldLFxuICAgIGhvc3REaXJlY3RpdmVzOiBbVHVpV2l0aEFwcGVhcmFuY2VdLFxuICAgIGhvc3Q6IHtcbiAgICAgICAgJ1thdHRyLmRhdGEtc2l6ZV0nOiAnc2l6ZScsXG4gICAgICAgICdbYXR0ci5kYXRhLXR5cGVdJzogJ3R5cGUnLFxuICAgICAgICAnW2NsYXNzLl9yb3VuZF0nOiAncm91bmQnLFxuICAgICAgICAnW2NsYXNzLl9zdmddJzogJ3N2ZycsXG4gICAgfSxcbn0pXG5leHBvcnQgY2xhc3MgVHVpQXZhdGFyIHtcbiAgICBwcml2YXRlIHJlYWRvbmx5IG9wdGlvbnMgPSBpbmplY3QoVFVJX0FWQVRBUl9PUFRJT05TKTtcblxuICAgIEBJbnB1dCgpXG4gICAgcHVibGljIHNpemUgPSB0aGlzLm9wdGlvbnMuc2l6ZTtcblxuICAgIEBJbnB1dCgpXG4gICAgcHVibGljIHJvdW5kID0gdGhpcy5vcHRpb25zLnJvdW5kO1xuXG4gICAgQElucHV0KClcbiAgICBwdWJsaWMgc3JjPzogU2FmZVJlc291cmNlVXJsIHwgc3RyaW5nIHwgbnVsbDtcblxuICAgIHByb3RlY3RlZCBnZXQgdmFsdWUoKTogU2FmZVJlc291cmNlVXJsIHwgc3RyaW5nIHtcbiAgICAgICAgcmV0dXJuIHRoaXMuc3JjIHx8ICcnO1xuICAgIH1cblxuICAgIHByb3RlY3RlZCBnZXQgc3ZnKCk6IGJvb2xlYW4ge1xuICAgICAgICByZXR1cm4gdHVpSXNTdHJpbmcodGhpcy52YWx1ZSkgJiYgdGhpcy52YWx1ZS5lbmRzV2l0aCgnLnN2ZycpO1xuICAgIH1cblxuICAgIHByb3RlY3RlZCBnZXQgdHlwZSgpOiAnY29udGVudCcgfCAnaWNvbicgfCAnaW1nJyB8ICd0ZXh0JyB7XG4gICAgICAgIGlmICh0aGlzLnZhbHVlICYmICF0dWlJc1N0cmluZyh0aGlzLnZhbHVlKSkge1xuICAgICAgICAgICAgcmV0dXJuICdpbWcnO1xuICAgICAgICB9XG5cbiAgICAgICAgaWYgKHRoaXMudmFsdWUuc3RhcnRzV2l0aCgnQHR1aS4nKSkge1xuICAgICAgICAgICAgcmV0dXJuICdpY29uJztcbiAgICAgICAgfVxuXG4gICAgICAgIGlmICh0aGlzLnZhbHVlLmxlbmd0aCA+IDAgJiYgdGhpcy52YWx1ZS5sZW5ndGggPCAzKSB7XG4gICAgICAgICAgICByZXR1cm4gJ3RleHQnO1xuICAgICAgICB9XG5cbiAgICAgICAgcmV0dXJuIHRoaXMudmFsdWUubGVuZ3RoID8gJ2ltZycgOiAnY29udGVudCc7XG4gICAgfVxufVxuIiwiPG5nLWNvbnRhaW5lciBbbmdTd2l0Y2hdPVwidHlwZVwiPlxuICAgIDxpbWdcbiAgICAgICAgKm5nU3dpdGNoQ2FzZT1cIidpbWcnXCJcbiAgICAgICAgYWx0PVwiXCJcbiAgICAgICAgbG9hZGluZz1cImxhenlcIlxuICAgICAgICBbc3JjXT1cInZhbHVlXCJcbiAgICAvPlxuICAgIDx0dWktaWNvblxuICAgICAgICAqbmdTd2l0Y2hDYXNlPVwiJ2ljb24nXCJcbiAgICAgICAgW2ljb25dPVwidmFsdWUudG9TdHJpbmcoKVwiXG4gICAgLz5cbiAgICA8bmctY29udGFpbmVyICpuZ1N3aXRjaENhc2U9XCIndGV4dCdcIj57eyB2YWx1ZSB9fTwvbmctY29udGFpbmVyPlxuICAgIDxuZy1jb250YWluZXIgKm5nU3dpdGNoRGVmYXVsdD5cbiAgICAgICAgPG5nLWNvbnRlbnQgLz5cbiAgICA8L25nLWNvbnRhaW5lcj5cbjwvbmctY29udGFpbmVyPlxuIl19