circletone/esm2022/lib/components/atoms/avatar/avatar.component.mjs

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
            }] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXZhdGFyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NpcmNsZXRvbmUvc3JjL2xpYi9jb21wb25lbnRzL2F0b21zL2F2YXRhci9hdmF0YXIuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY2lyY2xldG9uZS9zcmMvbGliL2NvbXBvbmVudHMvYXRvbXMvYXZhdGFyL2F2YXRhci5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBVSxNQUFNLGVBQWUsQ0FBQztBQUNsRixPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sd0JBQXdCLENBQUM7QUFDdkQsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLGdDQUFnQyxDQUFDOztBQVUvRCxNQUFNLE9BQU8sZUFBZTtJQVA1QjtRQVFXLFlBQU8sR0FBRyxFQUFFLENBQUM7UUFDYixVQUFLLEdBQUcsRUFBRSxDQUFDO1FBQ1gsU0FBSSxHQUFrQixNQUFNLENBQUM7UUFDN0IsY0FBUyxHQUFHLFlBQVksQ0FBQztRQUNsQyxrQkFBYSxHQUFHLEVBQUUsQ0FBQztLQVNwQjtJQVJDLFFBQVE7UUFDTixJQUFJLENBQUMsYUFBYTtZQUNoQixJQUFJLENBQUMsS0FBSztpQkFDUCxLQUFLLENBQUMsR0FBRyxDQUFDO2lCQUNWLEdBQUcsQ0FBQyxJQUFJLENBQUMsRUFBRSxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsRUFBRSxpQkFBaUIsRUFBRSxDQUFDO2lCQUN6QyxNQUFNLENBQUMsQ0FBQyxFQUFFLENBQUMsQ0FBQztpQkFDWixJQUFJLENBQUMsRUFBRSxDQUFDLElBQUksRUFBRSxDQUFDO0lBQ3RCLENBQUM7OEdBYlUsZUFBZTtrR0FBZixlQUFlLDJKQ1o1Qix1bkRBdUNBLDRDRC9CWSxhQUFhLDBIQUFFLGFBQWE7OzJGQUkzQixlQUFlO2tCQVAzQixTQUFTOytCQUNFLFdBQVcsY0FDVCxJQUFJLFdBQ1AsQ0FBQyxhQUFhLEVBQUUsYUFBYSxDQUFDLG1CQUV0Qix1QkFBdUIsQ0FBQyxNQUFNOzhCQUd0QyxPQUFPO3NCQUFmLEtBQUs7Z0JBQ0csS0FBSztzQkFBYixLQUFLO2dCQUNHLElBQUk7c0JBQVosS0FBSztnQkFDRyxTQUFTO3NCQUFqQixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgSW5wdXQsIE9uSW5pdCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgSWNvbkNvbXBvbmVudCB9IGZyb20gJy4uL2ljb24vaWNvbi5jb21wb25lbnQnO1xuaW1wb3J0IHsgU2FmZUltYWdlUGlwZSB9IGZyb20gJy4uLy4uLy4uL3BpcGVzL3NhZmUtaW1hZ2UucGlwZSc7XG5pbXBvcnQgeyBDb21wb25lbnRTaXplIH0gZnJvbSAnLi4vLi4vLi4vbW9kZWwvY29tcG9uZW50cy9jb21wb25lbnQtc2l6ZS50eXBlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnY3QtYXZhdGFyJyxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgaW1wb3J0czogW0ljb25Db21wb25lbnQsIFNhZmVJbWFnZVBpcGVdLFxuICB0ZW1wbGF0ZVVybDogJy4vYXZhdGFyLmNvbXBvbmVudC5odG1sJyxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG59KVxuZXhwb3J0IGNsYXNzIEF2YXRhckNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG4gIEBJbnB1dCgpIHBpY3R1cmUgPSAnJztcbiAgQElucHV0KCkgdGl0bGUgPSAnJztcbiAgQElucHV0KCkgc2l6ZTogQ29tcG9uZW50U2l6ZSA9ICdiYXNlJztcbiAgQElucHV0KCkgaW1hZ2VUeXBlID0gJ2ltYWdlL3dlYnAnO1xuICB0aXRsZUluaXRpYWxzID0gJyc7XG4gIG5nT25Jbml0KCk6IHZvaWQge1xuICAgIHRoaXMudGl0bGVJbml0aWFscyA9XG4gICAgICB0aGlzLnRpdGxlXG4gICAgICAgIC5zcGxpdCgnICcpXG4gICAgICAgIC5tYXAod29yZCA9PiB3b3JkWzBdPy50b0xvY2FsZVVwcGVyQ2FzZSgpKVxuICAgICAgICAuc3BsaWNlKDAsIDIpXG4gICAgICAgIC5qb2luKCcnKSA/PyAnJztcbiAgfVxufVxuIiwiQGlmIChwaWN0dXJlKSB7XG4gIEBpZiAoaW1hZ2VUeXBlICE9PSAnaWNvbicpIHtcbiAgICA8aW1nXG4gICAgICBbc3JjXT1cInBpY3R1cmUgfCBzYWZlSW1hZ2U6IGltYWdlVHlwZVwiXG4gICAgICBhbHQ9XCJ7eyB0aXRsZSB9fVwiXG4gICAgICBbY2xhc3Muc2l6ZS00MF09XCJzaXplID09PSAnM3hsJ1wiXG4gICAgICBbY2xhc3Muc2l6ZS0zMl09XCJzaXplID09PSAnMnhsJ1wiXG4gICAgICBbY2xhc3Muc2l6ZS0yNF09XCJzaXplID09PSAneGwnXCJcbiAgICAgIFtjbGFzcy5zaXplLTIwXT1cInNpemUgPT09ICdsZydcIlxuICAgICAgW2NsYXNzLnNpemUtMTRdPVwic2l6ZSA9PT0gJ2Jhc2UnXCJcbiAgICAgIFtjbGFzcy5zaXplLTEwXT1cInNpemUgPT09ICdzbSdcIlxuICAgICAgW2NsYXNzLnNpemUtNl09XCJzaXplID09PSAneHMnXCJcbiAgICAgIGNsYXNzPVwicm91bmRlZC1mdWxsIGJvcmRlci0yIGJvcmRlci1wcmltYXJ5IG9iamVjdC1jb3ZlciBkYXJrOmJvcmRlci1wcmltYXJ5LWRhcmtcIiAvPlxuICB9IEBlbHNlIHtcbiAgICA8ZGl2XG4gICAgICBjbGFzcz1cImZsZXggZmxleC1yb3cgaXRlbXMtY2VudGVyIGp1c3RpZnktY2VudGVyIHJvdW5kZWQtZnVsbCBiZy1zdXJmYWNlLXZhcmlhbnQgdGV4dC1vbi1wcmltYXJ5IGRhcms6Ymctc3VyZmFjZS12YXJpYW50LWRhcmsgZGFyazp0ZXh0LW9uLXByaW1hcnktZGFya1wiXG4gICAgICBbY2xhc3Muc2l6ZS00MF09XCJzaXplID09PSAnM3hsJ1wiXG4gICAgICBbY2xhc3Muc2l6ZS0zMl09XCJzaXplID09PSAnMnhsJ1wiXG4gICAgICBbY2xhc3Muc2l6ZS0yNF09XCJzaXplID09PSAneGwnXCJcbiAgICAgIFtjbGFzcy5zaXplLTIwXT1cInNpemUgPT09ICdsZydcIlxuICAgICAgW2NsYXNzLnNpemUtMTZdPVwic2l6ZSA9PT0gJ2Jhc2UnXCJcbiAgICAgIFtjbGFzcy5zaXplLTEyXT1cInNpemUgPT09ICdzbSdcIlxuICAgICAgW2NsYXNzLnNpemUtMTBdPVwic2l6ZSA9PT0gJ3hzJ1wiPlxuICAgICAgPGN0LWljb24gW2ljb25dPVwicGljdHVyZVwiIFtzaXplXT1cInNpemVcIiAvPlxuICAgIDwvZGl2PlxuICB9XG59IEBlbHNlIHtcbiAgPGRpdlxuICAgIFtjbGFzcy5zaXplLTQwXT1cInNpemUgPT09ICczeGwnXCJcbiAgICBbY2xhc3Muc2l6ZS0zMl09XCJzaXplID09PSAnMnhsJ1wiXG4gICAgW2NsYXNzLnNpemUtMjRdPVwic2l6ZSA9PT0gJ3hsJ1wiXG4gICAgW2NsYXNzLnNpemUtMjBdPVwic2l6ZSA9PT0gJ2xnJ1wiXG4gICAgW2NsYXNzLnNpemUtMTZdPVwic2l6ZSA9PT0gJ2Jhc2UnXCJcbiAgICBbY2xhc3Muc2l6ZS0xMl09XCJzaXplID09PSAnc20nXCJcbiAgICBbY2xhc3Muc2l6ZS0xMF09XCJzaXplID09PSAneHMnXCJcbiAgICBjbGFzcz1cImZsZXggaXRlbXMtY2VudGVyIGp1c3RpZnktY2VudGVyIHRydW5jYXRlIHJvdW5kZWQtZnVsbCBib3JkZXIgYm9yZGVyLXByaW1hcnkgYmctcHJpbWFyeS1jb250YWluZXIgdGV4dC1vbi1wcmltYXJ5LWNvbnRhaW5lciBkYXJrOmJnLXByaW1hcnktY29udGFpbmVyLWRhcmsgZGFyazp0ZXh0LW9uLXByaW1hcnktY29udGFpbmVyLWRhcmtcIj5cbiAgICA8c3BhbiBjbGFzcz1cInRleHQtMnhsIGZvbnQtbWVkaXVtXCI+IHt7IHRpdGxlSW5pdGlhbHMgfX08L3NwYW4+XG4gIDwvZGl2PlxufVxuIl19