import { r as registerInstance, h, H as Host, g as getElement } from './index-72f3c995.js';
import { b as getHostAttrs } from './index-9dff857b.js';

const bsProfileDetailsCss = "bs-profile-details .bs-profile-details{color:var(--bs-ink-light);font-size:var(--bs-text-sm)}bs-profile-details .bs-profile-details>:where(*){display:block}bs-profile-details .bs-profile-details>:where(*:first-child){--profile-name-color:var(--bs-ink-base);color:var(--profile-name-color)}";

const BsProfileDetails = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.profileName = undefined;
    this.company = undefined;
    this.jobTitle = undefined;
    this.email = undefined;
  }
  render() {
    return (h(Host, null, h("div", { class: "bs-profile-details" }, h("span", { "data-size": "sm", "data-weight": "bold" }, this.profileName), this.company && h("span", { "data-weight": "bold" }, this.company), this.jobTitle && h("span", null, this.jobTitle), this.email && h("span", null, this.email))));
  }
};
BsProfileDetails.style = bsProfileDetailsCss;

const bsProfileImgCss = "bs-profile-img{}bs-profile-img .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 .bs-profile-img :where(img){height:100%;object-fit:cover;width:100%}bs-profile-img .bs-profile-img:where([data-no-img]) img{display:none}bs-profile-img .bs-profile-img::before,bs-profile-img .bs-profile-img::after{border-radius:50%;border-collapse:collapse;height:100%;inset:0;position:absolute;width:100%}bs-profile-img .bs-profile-img::before{box-shadow:var(--bs-shadow-profilePhoto);content:\"\"}bs-profile-img .bs-profile-img:where([data-no-img])::before{display:none}bs-profile-img .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 .bs-profile-img:where([data-img-size^=\"xs\"]){--profile-size:1.5rem;--profile-text:var(--bs-text-xs)}bs-profile-img .bs-profile-img:where([data-img-size^=\"md\"]){--profile-size:3rem;--profile-text:var(--bs-text-md)}bs-profile-img .bs-profile-img:where([data-img-size^=\"lg\"]){--profile-size:4rem;--profile-text:var(--bs-text-lg)}bs-profile-img .bs-profile-img:where([data-img-size^=\"xl\"]){--profile-size:5.75rem;--profile-text:var(--bs-text-xl)}";

const BsProfileImg = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.src = undefined;
    this.size = undefined;
    this.initials = undefined;
    this.profileName = undefined;
  }
  render() {
    return (h(Host, null, h("div", { class: "bs-profile-img", "data-img-size": this.size, "data-initials": this.initials, "data-no-img": !this.src }, this.src && h("img", { src: this.src, alt: `${this.profileName} Profile Photo.` }))));
  }
};
BsProfileImg.style = bsProfileImgCss;

const bsProfileLayoutCss = "bs-profile-layout{}bs-profile-layout .bs-profile:where([data-layout]),bs-profile-layout .bs-profile:where([data-layout^=\"vertical\"]){display:grid;row-gap:0.5rem}bs-profile-layout .bs-profile:where([data-layout^=\"horizontal\"]){column-gap:1rem;grid-template-columns:auto 1fr;align-items:center}bs-profile-layout a.bs-profile:where([data-layout]){text-decoration:none}bs-profile-layout a.bs-profile:where([data-layout]) .bs-profile-details>*:first-child{--profile-name-color:var(--bs-blue-500)}bs-profile-layout a.bs-profile:where([data-layout]):hover .bs-profile-details>*:first-child{text-decoration:underline}bs-profile-layout .dark a.bs-profile:where([data-layout]) .bs-profile-details>*:first-child{--profile-name-color:var(--bs-blue-200)}";

const BsProfileLayout = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    /** Native attributes to pass through to the main element. */
    this.attrs = {};
    this.layout = 'vertical';
    this.href = undefined;
    this.passAttrs = '';
  }
  componentWillLoad() {
    this.attrs = getHostAttrs(this.hostEl, ['title', 'target', ...this.passAttrs.split(',')]);
  }
  render() {
    const TagName = this.href ? 'a' : 'div';
    return (h(Host, null, h(TagName, Object.assign({ href: this.href, class: "bs-profile", "data-layout": this.layout }, this.attrs), h("slot", null))));
  }
  get hostEl() { return getElement(this); }
};
BsProfileLayout.style = bsProfileLayoutCss;

export { BsProfileDetails as bs_profile_details, BsProfileImg as bs_profile_img, BsProfileLayout as bs_profile_layout };

//# sourceMappingURL=bs-profile-details_3.entry.js.map