import{avatar_styles_default as i}from"./chunk.2WKF4RIH.js";import{SlIcon as a}from"./chunk.M4HIRIJ5.js";import{watch as r}from"./chunk.C7FWPEOY.js";import{ShoelaceElement as t}from"./chunk.Z7XDKKOD.js";import{__decorateClass as s}from"./chunk.6M63UXML.js";import{classMap as e}from"../../../../lit/directives/class-map.js";import{html as o}from"../../../../lit/index.js";import{property as l,state as n}from"../../../../lit/decorators.js";var h=class extends t{constructor(){super(...arguments),this.hasError=!1,this.image="",this.label="",this.initials="",this.loading="eager",this.shape="circle"}handleImageChange(){this.hasError=!1}render(){const i=o`
      <img
        part="image"
        class="avatar__image"
        src="${this.image}"
        loading="${this.loading}"
        alt=""
        @error="${()=>this.hasError=!0}"
      />
    `;let a=o``;return a=this.initials?o`<div part="initials" class="avatar__initials">${this.initials}</div>`:o`
        <div part="icon" class="avatar__icon" aria-hidden="true">
          <slot name="icon">
            <sl-icon name="person-fill" library="system"></sl-icon>
          </slot>
        </div>
      `,o`
      <div
        part="base"
        class=${e({avatar:!0,"avatar--circle":"circle"===this.shape,"avatar--rounded":"rounded"===this.shape,"avatar--square":"square"===this.shape})}
        role="img"
        aria-label=${this.label}
      >
        ${this.image&&!this.hasError?i:a}
      </div>
    `}};h.styles=i,h.dependencies={"sl-icon":a},s([n()],h.prototype,"hasError",2),s([l()],h.prototype,"image",2),s([l()],h.prototype,"label",2),s([l()],h.prototype,"initials",2),s([l()],h.prototype,"loading",2),s([l({reflect:!0})],h.prototype,"shape",2),s([r("image")],h.prototype,"handleImageChange",1);export{h as SlAvatar};