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
            ? this.title
                .split(' ')
                .map(word => word[0]?.toLocaleUpperCase())
                .splice(0, 2)
                .join('')
            : '';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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: "18.2.13", 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
            }] } });
//# sourceMappingURL=data:application/json;base64, 