FileMaster

Edit File: sc-avatar.js

import{h}from"@stencil/core";export class ScAvatar{constructor(){this.hasError=!1,this.image="",this.label="",this.initials="",this.loading="eager",this.shape="circle"}handleImageChange(){this.hasError=!1}render(){return h("div",{key:"821ead88102981568ab5f81dfd06c9e60b7db0fb",part:"base",class:{avatar:!0,"avatar--circle":"circle"===this.shape,"avatar--rounded":"rounded"===this.shape,"avatar--square":"square"===this.shape},role:"img","aria-label":this.label},this.initials?h("div",{part:"initials",class:"avatar__initials"},this.initials):h("div",{part:"icon",class:"avatar__icon","aria-hidden":"true"},h("slot",{name:"icon"},h("sl-icon",{name:"person-fill",library:"system"}))),this.image&&!this.hasError&&h("img",{key:"5e2ba5dbd8033f9ed8fc902bc80093db3e3aedf6",part:"image",class:"avatar__image",src:this.image,loading:this.loading,alt:"",onError:()=>this.hasError=!0}))}static get is(){return"sc-avatar"}static get encapsulation(){return"shadow"}static get originalStyleUrls(){return{$:["sc-avatar.css"]}}static get styleUrls(){return{$:["sc-avatar.css"]}}static get properties(){return{image:{type:"string",mutable:!1,complexType:{original:"string",resolved:"string",references:{}},required:!1,optional:!1,docs:{tags:[],text:"The image source to use for the avatar."},attribute:"image",reflect:!1,defaultValue:"''"},label:{type:"string",mutable:!1,complexType:{original:"string",resolved:"string",references:{}},required:!1,optional:!1,docs:{tags:[],text:"A label to use to describe the avatar to assistive devices."},attribute:"label",reflect:!1,defaultValue:"''"},initials:{type:"string",mutable:!1,complexType:{original:"string",resolved:"string",references:{}},required:!1,optional:!1,docs:{tags:[],text:"Initials to use as a fallback when no image is available (1-2 characters max recommended)."},attribute:"initials",reflect:!1,defaultValue:"''"},loading:{type:"string",mutable:!1,complexType:{original:"'eager' | 'lazy'",resolved:'"eager" | "lazy"',references:{}},required:!1,optional:!1,docs:{tags:[],text:"Indicates how the browser should load the image."},attribute:"loading",reflect:!1,defaultValue:"'eager'"},shape:{type:"string",mutable:!1,complexType:{original:"'circle' | 'square' | 'rounded'",resolved:'"circle" | "rounded" | "square"',references:{}},required:!1,optional:!1,docs:{tags:[],text:"The shape of the avatar."},attribute:"shape",reflect:!0,defaultValue:"'circle'"}}}static get states(){return{hasError:{}}}static get watchers(){return[{propName:"image",methodName:"handleImageChange"}]}}

Back