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

const bsProfileImgCss = ".bs-profile-img,bs-profile-img,.bs-profile-img:where([data-img-size^=\"sm\"]){--profile-size:2rem;--profile-text:var(--bs-text-sm);aspect-ratio:1/1;border-radius:50%;height:var(--profile-size);overflow:hidden;position:relative;width:var(--profile-size)}.bs-profile-img :where(img),bs-profile-img :where(img){height:100%;object-fit:cover;width:100%}.bs-profile-img:where([data-no-img]) img,bs-profile-img:where([data-no-img]) img{display:none}.bs-profile-img::before,bs-profile-img::before,.bs-profile-img::after,bs-profile-img::after{border-radius:50%;border-collapse:collapse;height:100%;inset:0;position:absolute;width:100%}.bs-profile-img::before,bs-profile-img::before{box-shadow:var(--bs-shadow-profilePhoto);content:\"\"}.bs-profile-img:where([data-no-img])::before,bs-profile-img:where([data-no-img])::before{display:none}.bs-profile-img:where([data-no-img])::after,bs-profile-img:where([data-no-img])::after{border:1px solid currentColor;color:var(--bs-blue-500);content:attr(data-initials);font-size:var(--profile-text);text-transform:uppercase;display:grid;place-items:center}.bs-profile-img:where([data-img-size^=\"xs\"]),bs-profile-img:where([data-img-size^=\"xs\"]){--profile-size:1.5rem;--profile-text:var(--bs-text-xs)}.bs-profile-img:where([data-img-size^=\"md\"]),bs-profile-img:where([data-img-size^=\"md\"]){--profile-size:3rem;--profile-text:var(--bs-text-md)}.bs-profile-img:where([data-img-size^=\"lg\"]),bs-profile-img:where([data-img-size^=\"lg\"]){--profile-size:4rem;--profile-text:var(--bs-text-lg)}.bs-profile-img:where([data-img-size^=\"xl\"]),bs-profile-img:where([data-img-size^=\"xl\"]){--profile-size:5.75rem;--profile-text:var(--bs-text-xl)}";

const BsProfileImg = /*@__PURE__*/ proxyCustomElement(class BsProfileImg extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.src = undefined;
    this.size = undefined;
    this.initials = undefined;
    this.profileName = undefined;
    this.showImage = !!this.src;
  }
  render() {
    return (h(Host, { class: "bs-profile-img", "data-img-size": this.size, "data-initials": this.initials, "data-no-img": !this.showImage }, this.showImage && h("img", { src: this.src, alt: `${this.profileName} Profile Photo.`, onError: () => this.showImage = false })));
  }
  static get style() { return bsProfileImgCss; }
}, [0, "bs-profile-img", {
    "src": [1],
    "size": [1],
    "initials": [1],
    "profileName": [1, "profile-name"],
    "showImage": [32]
  }]);
function defineCustomElement() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["bs-profile-img"];
  components.forEach(tagName => { switch (tagName) {
    case "bs-profile-img":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, BsProfileImg);
      }
      break;
  } });
}

export { BsProfileImg as B, defineCustomElement as d };

//# sourceMappingURL=bs-profile-img2.js.map