import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';

const scAvatarCss = ":host{display:inline-block;--sc-avatar-size:3rem}.avatar{display:inline-flex;align-items:center;justify-content:center;position:relative;width:var(--sc-avatar-size);height:var(--sc-avatar-size);background-color:var(--sc-color-gray-400);font-family:var(--sc-font-sans);font-size:calc(var(--sc-avatar-size) * 0.5);font-weight:var(--sc-font-weight-normal);color:var(--sc-color-white);user-select:none;vertical-align:middle}.avatar--circle,.avatar--circle .avatar__image{border-radius:var(--sc-border-radius-circle)}.avatar--rounded,.avatar--rounded .avatar__image{border-radius:var(--sc-border-radius-medium)}.avatar--square{border-radius:0}.avatar__icon{display:flex;align-items:center;justify-content:center;position:absolute;top:0;left:0;width:100%;height:100%}.avatar__initials{line-height:1;text-transform:uppercase}.avatar__image{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;overflow:hidden}";

const ScAvatar$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.__attachShadow();
    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 watchers() { return {
    "image": ["handleImageChange"]
  }; }
  static get style() { return scAvatarCss; }
}, [1, "sc-avatar", {
    "image": [1],
    "label": [1],
    "initials": [1],
    "loading": [1],
    "shape": [513],
    "hasError": [32]
  }]);
function defineCustomElement$1() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["sc-avatar"];
  components.forEach(tagName => { switch (tagName) {
    case "sc-avatar":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, ScAvatar$1);
      }
      break;
  } });
}
defineCustomElement$1();

const ScAvatar = ScAvatar$1;
const defineCustomElement = defineCustomElement$1;

export { ScAvatar, defineCustomElement };
