| 1234567891011121314151617181920212223242526272829303132333435 |
- import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
- import { IconComponent } from '../icon/icon.component';
- import { SafeImagePipe } from '../../../pipes/safe-image.pipe';
- import * as i0 from "@angular/core";
- export class AvatarComponent {
- constructor() {
- this.picture = '';
- this.title = '';
- this.size = 'base';
- this.imageType = 'image/webp';
- this.titleInitials = '';
- }
- ngOnInit() {
- this.titleInitials = this.title
- .split(' ')
- .map(word => word[0]?.toLocaleUpperCase())
- .splice(0, 2)
- .join('');
- }
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: AvatarComponent, isStandalone: true, selector: "ct-avatar", inputs: { picture: "picture", title: "title", size: "size", imageType: "imageType" }, ngImport: i0, template: "@if (picture) {\n @if (imageType !== 'icon') {\n <img\n [src]=\"picture | safeImage: imageType\"\n alt=\"{{ title }}\"\n [class.size-40]=\"size === '3xl'\"\n [class.size-32]=\"size === '2xl'\"\n [class.size-24]=\"size === 'xl'\"\n [class.size-20]=\"size === 'lg'\"\n [class.size-14]=\"size === 'base'\"\n [class.size-10]=\"size === 'sm'\"\n [class.size-6]=\"size === 'xs'\"\n class=\"rounded-full border-2 border-primary object-cover dark:border-primary-dark\" />\n } @else {\n <div\n class=\"flex flex-row items-center justify-center rounded-full bg-surface-variant text-on-primary dark:bg-surface-variant-dark dark:text-on-primary-dark\"\n [class.size-40]=\"size === '3xl'\"\n [class.size-32]=\"size === '2xl'\"\n [class.size-24]=\"size === 'xl'\"\n [class.size-20]=\"size === 'lg'\"\n [class.size-16]=\"size === 'base'\"\n [class.size-12]=\"size === 'sm'\"\n [class.size-10]=\"size === 'xs'\">\n <ct-icon [icon]=\"picture\" [size]=\"size\" />\n </div>\n }\n} @else {\n <div\n [class.size-40]=\"size === '3xl'\"\n [class.size-32]=\"size === '2xl'\"\n [class.size-24]=\"size === 'xl'\"\n [class.size-20]=\"size === 'lg'\"\n [class.size-16]=\"size === 'base'\"\n [class.size-12]=\"size === 'sm'\"\n [class.size-10]=\"size === 'xs'\"\n class=\"flex items-center justify-center truncate rounded-full border border-primary bg-primary-container text-on-primary-container dark:bg-primary-container-dark dark:text-on-primary-container-dark\">\n <span class=\"text-2xl font-medium\"> {{ titleInitials }}</span>\n </div>\n}\n", dependencies: [{ kind: "component", type: IconComponent, selector: "ct-icon", inputs: ["icon", "fill", "strokeWidth", "strokeColor", "size", "variant"] }, { kind: "pipe", type: SafeImagePipe, name: "safeImage" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
- }
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: AvatarComponent, decorators: [{
- type: Component,
- args: [{ selector: 'ct-avatar', standalone: true, imports: [IconComponent, SafeImagePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (picture) {\n @if (imageType !== 'icon') {\n <img\n [src]=\"picture | safeImage: imageType\"\n alt=\"{{ title }}\"\n [class.size-40]=\"size === '3xl'\"\n [class.size-32]=\"size === '2xl'\"\n [class.size-24]=\"size === 'xl'\"\n [class.size-20]=\"size === 'lg'\"\n [class.size-14]=\"size === 'base'\"\n [class.size-10]=\"size === 'sm'\"\n [class.size-6]=\"size === 'xs'\"\n class=\"rounded-full border-2 border-primary object-cover dark:border-primary-dark\" />\n } @else {\n <div\n class=\"flex flex-row items-center justify-center rounded-full bg-surface-variant text-on-primary dark:bg-surface-variant-dark dark:text-on-primary-dark\"\n [class.size-40]=\"size === '3xl'\"\n [class.size-32]=\"size === '2xl'\"\n [class.size-24]=\"size === 'xl'\"\n [class.size-20]=\"size === 'lg'\"\n [class.size-16]=\"size === 'base'\"\n [class.size-12]=\"size === 'sm'\"\n [class.size-10]=\"size === 'xs'\">\n <ct-icon [icon]=\"picture\" [size]=\"size\" />\n </div>\n }\n} @else {\n <div\n [class.size-40]=\"size === '3xl'\"\n [class.size-32]=\"size === '2xl'\"\n [class.size-24]=\"size === 'xl'\"\n [class.size-20]=\"size === 'lg'\"\n [class.size-16]=\"size === 'base'\"\n [class.size-12]=\"size === 'sm'\"\n [class.size-10]=\"size === 'xs'\"\n class=\"flex items-center justify-center truncate rounded-full border border-primary bg-primary-container text-on-primary-container dark:bg-primary-container-dark dark:text-on-primary-container-dark\">\n <span class=\"text-2xl font-medium\"> {{ titleInitials }}</span>\n </div>\n}\n" }]
- }], propDecorators: { picture: [{
- type: Input
- }], title: [{
- type: Input
- }], size: [{
- type: Input
- }], imageType: [{
- type: Input
- }] } });
|
