igniteui-angular/fesm2022/igniteui-angular-avatar.mjs.map

Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps

{"version":3,"file":"igniteui-angular-avatar.mjs","sources":["../../../projects/igniteui-angular/avatar/src/avatar/avatar.component.ts","../../../projects/igniteui-angular/avatar/src/avatar/avatar.component.html","../../../projects/igniteui-angular/avatar/src/avatar/avatar.module.ts","../../../projects/igniteui-angular/avatar/src/igniteui-angular-avatar.ts"],"sourcesContent":["import { NgTemplateOutlet } from '@angular/common';\nimport { Component, ElementRef, HostBinding, Input, OnInit, TemplateRef, ViewChild, inject } from '@angular/core';\n\nimport { normalizeURI } from 'igniteui-angular/core';\nimport { IgxIconComponent } from 'igniteui-angular/icon';\n\nlet NEXT_ID = 0;\nexport const IgxAvatarSize = {\n    SMALL: 'small',\n    MEDIUM: 'medium',\n    LARGE: 'large'\n} as const;\nexport type IgxAvatarSize = (typeof IgxAvatarSize)[keyof typeof IgxAvatarSize];\n\nexport const IgxAvatarType = {\n    INITIALS: 'initials',\n    IMAGE: 'image',\n    ICON: 'icon',\n    CUSTOM: 'custom'\n} as const;\nexport type IgxAvatarType = (typeof IgxAvatarType)[keyof typeof IgxAvatarType];\n\n/**\n * Avatar provides a way to display an image, icon or initials to the user.\n *\n * @igxModule IgxAvatarModule\n *\n * @igxTheme igx-avatar-theme, igx-icon-theme\n *\n * @igxKeywords avatar, profile, picture, initials\n *\n * @igxGroup Layouts\n *\n * @remarks\n *\n * The Ignite UI Avatar provides an easy way to add an avatar icon to your application.  This icon can be an\n * image, someone's initials or a material icon from the Google Material icon set.\n *\n * @example\n * ```html\n * <igx-avatar initials=\"MS\" shape=\"rounded\" size=\"large\">\n * </igx-avatar>\n * ```\n */\n@Component({\n    selector: 'igx-avatar',\n    templateUrl: 'avatar.component.html',\n    imports: [IgxIconComponent, NgTemplateOutlet]\n})\nexport class IgxAvatarComponent implements OnInit {\n    public elementRef = inject(ElementRef);\n\n    /**\n     * Returns the `aria-label` attribute of the avatar.\n     *\n     * @example\n     * ```typescript\n     * let ariaLabel = this.avatar.ariaLabel;\n     * ```\n     *\n     */\n    @HostBinding('attr.aria-label')\n    public ariaLabel = 'avatar';\n\n    /**\n     * Returns the `role` attribute of the avatar.\n     *\n     * @example\n     * ```typescript\n     * let avatarRole = this.avatar.role;\n     * ```\n     */\n    @HostBinding('attr.role')\n    public role = 'img';\n\n    /**\n     * Host `class.igx-avatar` binding.\n     *\n     * @hidden\n     * @internal\n     */\n    @HostBinding('class.igx-avatar')\n    public cssClass = 'igx-avatar';\n\n    /**\n     * Returns the type of the avatar.\n     * The avatar can be:\n     * - `\"initials type avatar\"`\n     * - `\"icon type avatar\"`\n     * - `\"image type avatar\"`.\n     * - `\"custom type avatar\"`.\n     *\n     * @example\n     * ```typescript\n     * let avatarDescription = this.avatar.roleDescription;\n     * ```\n     */\n    @HostBinding('attr.aria-roledescription')\n    public roleDescription: string;\n\n    /**\n     * Sets the `id` of the avatar. If not set, the first avatar component will have `id` = `\"igx-avatar-0\"`.\n     *\n     * @example\n     * ```html\n     * <igx-avatar id=\"my-first-avatar\"></igx-avatar>\n     * ```\n     */\n    @HostBinding('attr.id')\n    @Input()\n    public id = `igx-avatar-${NEXT_ID++}`;\n\n    /**\n     * Sets square, rounded or circular shape to the avatar.\n     * By default the shape of the avatar is square.\n     *\n     * @example\n     * ```html\n     * <igx-avatar shape=\"rounded\"></igx-avatar>\n     * ```\n     */\n    @Input()\n    public shape: 'square' | 'rounded' | 'circle' = 'square';\n\n    /** @hidden @internal */\n    @HostBinding('class.igx-avatar--rounded')\n    public get isRounded(): boolean {\n        return this.shape === 'rounded';\n    }\n\n    /** @hidden @internal */\n    @HostBinding('class.igx-avatar--circle')\n    public get isCircle(): boolean {\n        return this.shape === 'circle';\n    }\n\n    /**\n     * Sets the color of the avatar's initials or icon.\n     *\n     * @example\n     * ```html\n     * <igx-avatar color=\"blue\"></igx-avatar>\n     * ```\n     * @deprecated in version 17.2.0.\n     */\n\n    @HostBinding('style.color')\n    @Input()\n    public color: string;\n\n    /**\n     * Sets the background color of the avatar.\n     *\n     * @example\n     * ```html\n     * <igx-avatar bgColor=\"yellow\"></igx-avatar>\n     * ```\n     * @igxFriendlyName Background color\n     * @deprecated in version 17.2.0.\n     */\n\n    @HostBinding('style.background')\n    @Input()\n    public bgColor: string;\n\n    /**\n     * Sets initials to the avatar.\n     *\n     * @example\n     * ```html\n     * <igx-avatar initials=\"MN\"></igx-avatar>\n     * ```\n     */\n    @Input()\n    public initials: string;\n\n    /**\n     * Sets an icon to the avatar. All icons from the material icon set are supported.\n     *\n     * @example\n     * ```html\n     * <igx-avatar icon=\"phone\"></igx-avatar>\n     * ```\n     */\n    @Input()\n    public icon: string;\n\n    /**\n     * Sets the image source of the avatar.\n     *\n     * @example\n     * ```html\n     * <igx-avatar src=\"images/picture.jpg\"></igx-avatar>\n     * ```\n     * @igxFriendlyName Image URL\n     */\n    @Input()\n    public set src(value: string) {\n        this._src = normalizeURI(value);\n    }\n\n    public get src() {\n        return this._src;\n    }\n\n    /** @hidden @internal */\n    @ViewChild('defaultTemplate', { read: TemplateRef, static: true })\n    protected defaultTemplate: TemplateRef<any>;\n\n    /** @hidden @internal */\n    @ViewChild('imageTemplate', { read: TemplateRef, static: true })\n    protected imageTemplate: TemplateRef<any>;\n\n    /** @hidden @internal */\n    @ViewChild('initialsTemplate', { read: TemplateRef, static: true })\n    protected initialsTemplate: TemplateRef<any>;\n\n    /** @hidden @internal */\n    @ViewChild('iconTemplate', { read: TemplateRef, static: true })\n    protected iconTemplate: TemplateRef<any>;\n\n    /**\n     * @hidden\n     * @internal\n     */\n    private _size: string | IgxAvatarSize;\n    private _src: string;\n\n    /**\n     * Returns the size of the avatar.\n     *\n     * @example\n     * ```typescript\n     * let avatarSize = this.avatar.size;\n     * ```\n     */\n    @Input()\n    public get size(): string | IgxAvatarSize {\n        return this._size || IgxAvatarSize.SMALL;\n    }\n\n    /**\n     * Sets the size  of the avatar.\n     * By default, the size is `\"small\"`. It can be set to `\"medium\"` or `\"large\"`.\n     *\n     * @example\n     * ```html\n     * <igx-avatar size=\"large\"></igx-avatar>\n     * ```\n     */\n    public set size(value: string | IgxAvatarSize) {\n        switch (value) {\n            case 'small':\n            case 'medium':\n            case 'large':\n                this._size = value;\n                break;\n            default:\n                this._size = 'small';\n        }\n    }\n\n    /**\n     * Returns the type of the avatar.\n     *\n     * @example\n     * ```typescript\n     * let avatarType = this.avatar.type;\n     * ```\n     */\n    public get type(): IgxAvatarType {\n        if (this.src) {\n            return IgxAvatarType.IMAGE;\n        }\n\n        if (this.icon) {\n            return IgxAvatarType.ICON;\n        }\n\n        if (this.initials) {\n            return IgxAvatarType.INITIALS;\n        }\n\n        return IgxAvatarType.CUSTOM;\n    }\n\n    /** @hidden @internal */\n    @HostBinding('class.igx-avatar--image')\n    public get _isImageType(): boolean {\n        return this.type === IgxAvatarType.IMAGE;\n    }\n    /** @hidden @internal */\n    @HostBinding('class.igx-avatar--icon')\n    public get _isIconType(): boolean {\n        return this.type === IgxAvatarType.ICON;\n    }\n    /** @hidden @internal */\n    @HostBinding('class.igx-avatar--initials')\n    public get _isInitialsType(): boolean {\n        return this.type === IgxAvatarType.INITIALS;\n    }\n\n    @HostBinding('style.--component-size')\n    protected get componentSize() {\n        if (this._size) {\n            return `var(--ig-size-${this._size})`;\n        }\n    }\n\n    /**\n     * Returns the template of the avatar.\n     *\n     * @hidden\n     * @internal\n     */\n    public get template(): TemplateRef<any> {\n        switch (this.type) {\n            case IgxAvatarType.IMAGE:\n                return this.imageTemplate;\n            case IgxAvatarType.INITIALS:\n                return this.initialsTemplate;\n            case IgxAvatarType.ICON:\n                return this.iconTemplate;\n            default:\n                return this.defaultTemplate;\n        }\n    }\n\n    /**\n     * Returns the css url of the image.\n     *\n     * @hidden\n     * @internal\n     */\n    public getSrcUrl() {\n        return `url(\"${this.src}\")`;\n    }\n\n    /** @hidden @internal */\n    public ngOnInit() {\n        this.roleDescription = this.getRole();\n    }\n\n    /** @hidden @internal */\n    private getRole(): string {\n        switch (this.type) {\n            case IgxAvatarType.IMAGE:\n                return 'image avatar';\n            case IgxAvatarType.ICON:\n                return 'icon avatar';\n            case IgxAvatarType.INITIALS:\n                return 'initials avatar';\n            default:\n                return 'custom avatar';\n        }\n    }\n}\n\n","<ng-template #defaultTemplate>\n    <ng-content></ng-content>\n</ng-template>\n\n<ng-template #imageTemplate>\n    <div #image class=\"igx-avatar__image\" [style.backgroundImage]=\"getSrcUrl()\"></div>\n</ng-template>\n\n<ng-template #initialsTemplate>\n    <span>{{initials.substring(0, 2)}}</span>\n</ng-template>\n\n<ng-template #iconTemplate>\n     <igx-icon>{{icon}}</igx-icon>\n</ng-template>\n\n<ng-container *ngTemplateOutlet=\"template\"></ng-container>\n","import { NgModule } from '@angular/core';\nimport { IgxAvatarComponent } from './avatar.component';\n\n/**\n * @hidden\n * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components\n */\n@NgModule({\n    imports: [IgxAvatarComponent],\n    exports: [IgxAvatarComponent]\n})\nexport class IgxAvatarModule { }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}