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

const bsProfileDetailsCss = ".bs-profile-details,bs-profile-details{color:var(--bs-ink-light);font-size:var(--bs-text-sm)}.bs-profile-details>:where(*),bs-profile-details>:where(*){display:block}.bs-profile-details>:where(.bs-profile-name),bs-profile-details>:where(.bs-profile-name){color:var(--profile-name-color, var(--bs-ink-base));text-decoration:var(--profile-name-decoration, none)}.bs-profile-details>:where(button:first-child),bs-profile-details>:where(button:first-child){color:var(--profile-action-color, var(--bs-orange-warning));font-size:inherit}.bs-profile-details>:where([data-icon]),bs-profile-details>:where([data-icon]){align-items:normal;column-gap:0.5rem;cursor:pointer;display:flex;font-size:inherit}";

const BsProfileDetails = /*@__PURE__*/ proxyCustomElement(class BsProfileDetails extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.actionToggled = createEvent(this, "action-toggled", 7);
    this.profileName = undefined;
    this.company = undefined;
    this.jobTitle = undefined;
    this.email = undefined;
    this.action = undefined;
    this.actionIcon = undefined;
    this.miscMeta = undefined;
    this.miscMetaIcon = undefined;
  }
  handleActionToggle(e) {
    if (e.target.tagName !== 'BUTTON')
      return;
    e.preventDefault();
    e.stopPropagation();
    this.actionToggled.emit();
  }
  get actionButton() {
    if (!this.action)
      return null;
    const ActionIcon = this.actionIcon ? `bs-icon-${this.actionIcon}` : null;
    return (h("button", { "data-icon": true }, ActionIcon && h(ActionIcon, { size: "sm" }), this.action));
  }
  get metaText() {
    if (!this.miscMeta)
      return null;
    const MetaIcon = this.miscMetaIcon ? `bs-icon-${this.miscMetaIcon}` : null;
    return (h("span", { "data-icon": true }, MetaIcon && h(MetaIcon, { size: "sm" }), this.miscMeta));
  }
  render() {
    return (h(Host, { class: "bs-profile-details" }, this.actionButton, h("span", { class: "bs-profile-name", "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), this.metaText));
  }
  static get style() { return bsProfileDetailsCss; }
}, [0, "bs-profile-details", {
    "profileName": [1, "profile-name"],
    "company": [1],
    "jobTitle": [1, "job-title"],
    "email": [1],
    "action": [1],
    "actionIcon": [1, "action-icon"],
    "miscMeta": [1, "misc-meta"],
    "miscMetaIcon": [1, "misc-meta-icon"]
  }, [[0, "click", "handleActionToggle"]]]);
function defineCustomElement() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["bs-profile-details"];
  components.forEach(tagName => { switch (tagName) {
    case "bs-profile-details":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, BsProfileDetails);
      }
      break;
  } });
}

export { BsProfileDetails as B, defineCustomElement as d };

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