import { Component, h, State, Prop, Watch } from '@stencil/core';
export class ScAvatar {
  constructor() {
    this.hasError = false;
    /** The image source to use for the avatar. */
    this.image = '';
    /** A label to use to describe the avatar to assistive devices. */
    this.label = '';
    /** Initials to use as a fallback when no image is available (1-2 characters max recommended). */
    this.initials = '';
    /** Indicates how the browser should load the image. */
    this.loading = 'eager';
    /** The shape of the avatar. */
    this.shape = 'circle';
  }
  handleImageChange() {
    // Reset the error when a new image is provided
    this.hasError = false;
  }
  render() {
    return (h("div", { part: "base", class: {
        'avatar': true,
        'avatar--circle': this.shape === 'circle',
        'avatar--rounded': this.shape === 'rounded',
        'avatar--square': this.shape === 'square',
      }, 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", { part: "image", class: "avatar__image", src: this.image, loading: this.loading, alt: "", onError: () => (this.hasError = true) })));
  }
  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": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "The image source to use for the avatar."
      },
      "attribute": "image",
      "reflect": false,
      "defaultValue": "''"
    },
    "label": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "A label to use to describe the avatar to assistive devices."
      },
      "attribute": "label",
      "reflect": false,
      "defaultValue": "''"
    },
    "initials": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Initials to use as a fallback when no image is available (1-2 characters max recommended)."
      },
      "attribute": "initials",
      "reflect": false,
      "defaultValue": "''"
    },
    "loading": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "'eager' | 'lazy'",
        "resolved": "\"eager\" | \"lazy\"",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Indicates how the browser should load the image."
      },
      "attribute": "loading",
      "reflect": false,
      "defaultValue": "'eager'"
    },
    "shape": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "'circle' | 'square' | 'rounded'",
        "resolved": "\"circle\" | \"rounded\" | \"square\"",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "The shape of the avatar."
      },
      "attribute": "shape",
      "reflect": true,
      "defaultValue": "'circle'"
    }
  }; }
  static get states() { return {
    "hasError": {}
  }; }
  static get watchers() { return [{
      "propName": "image",
      "methodName": "handleImageChange"
    }]; }
}
