import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { a as getHostAttrs } from './index2.js';
import { g as getButtonOrLink } from './getButtonOrLink.js';

const bsCircleButtonCss = "bs-circle-button{display:inline-block;}bs-circle-button .bs-circle-button{--btn-main:var(--bs-blue-base);--btn-secondary:var(--bs-blue-medium);--btn-highlight:var(--bs-blue-lightest);--btn-border-color:transparent;--btn-border-radius:50%;--btn-icon-bg-color:var(--btn-main);--btn-icon-padding:.75rem;--btn-icon-size:1.5rem;--btn-icon-stroke-color:var(--bs-white);--btn-text-color:var(--bs-ink-base);--btn-text-size:var(--bs-text-md);align-items:center;background-color:transparent;border-radius:var(--btn-border-radius);color:var(--btn-text-color);cursor:pointer;display:inline-flex;font-size:var(--btn-text-size);gap:0.5rem;outline:none;position:relative;vertical-align:middle}bs-circle-button a.bs-circle-button{align-items:center;display:inline-flex;outline:none;text-decoration:none}bs-circle-button .bs-circle-button::before{border-color:var(--btn-border-color);border-radius:var(--btn-border-radius);border-style:solid;border-width:0.125rem;content:\"\";height:calc(100% + 0.5rem);inset:-0.25rem;position:absolute;transition:border-color 0.125s ease-in-out;width:calc(100% + 0.5rem)}bs-circle-button .bs-circle-button :where(.bs-circle-button-icon){align-items:center;background-color:var(--btn-icon-bg-color);border:none;border-radius:50%;color:var(--btn-icon-stroke-color);display:inline-flex;justify-content:center;outline:2px solid transparent;padding:var(--btn-icon-padding);position:relative;transition:all 100ms ease-in-out}bs-circle-button .bs-circle-button :where(.bs-circle-button-icon svg){height:var(--btn-icon-size);width:var(--btn-icon-size)}bs-circle-button .bs-circle-button:where([data-size^=\"sm\"]){--btn-icon-padding:.375rem;--btn-icon-size:.75rem;--btn-text-size:var(--bs-text-sm)}bs-circle-button .bs-circle-button:where([data-text]){--btn-border-radius:0.5rem}bs-circle-button .bs-circle-button:where([data-ghost]:not([data-ghost=\"false\"])){--btn-icon-stroke-color:var(--btn-main);--btn-light:var(--bs-blue-10);--btn-secondary:var(--bs-blue-10)}bs-circle-button .bs-circle-button:where([data-ghost]:not([data-ghost=\"false\"])) :where(.bs-circle-button-icon){background-color:transparent;box-shadow:inset 0 0 0 1px transparent;color:var(--btn-icon-stroke-color)}bs-circle-button .bs-circle-button:where([data-ghost]:not([data-ghost=\"false\"])) :where(.bs-circle-button-icon)::before{border-radius:50%}bs-circle-button .bs-circle-button:active,bs-circle-button .bs-circle-button:hover{--btn-icon-bg-color:var(--btn-secondary)}bs-circle-button .bs-circle-button:active :where(.bs-circle-button-icon){transform:scale(0.97);transform-origin:center;box-shadow:inset 0px 0px 4px 1px var(--btn-main)}bs-circle-button .bs-circle-button:where([data-direction=\"right\"]):hover :where(.bs-circle-button-icon){transform:translateX(0.25rem)}bs-circle-button .bs-circle-button:where([data-direction=\"left\"]):hover :where(.bs-circle-button-icon){transform:translateX(-0.25rem)}bs-circle-button .bs-circle-button:where([data-ghost]:not([data-ghost=\"false\"])):hover :where(.bs-circle-button-icon){background-color:var(--btn-light)}bs-circle-button .bs-circle-button:where([data-ghost]:not([data-ghost=\"false\"])):active{box-shadow:inset 0 0 0 1px var(--btn-main), inset 0px 0px 4px 1px var(--btn-highlight)}bs-circle-button .bs-circle-button:focus-visible{--btn-border-color:var(--btn-main)}bs-circle-button .bs-circle-button:where(:disabled,[aria-disabled]:not([aria-disabled=\"false\"])){--btn-icon-stroke-color:var(--bs-ink-disabled);--btn-text-color:var(--bs-ink-disabled);pointer-events:none}bs-circle-button .bs-circle-button:where(:disabled,[aria-disabled]:not([aria-disabled=\"false\"])) :where(.bs-circle-button-icon){background-color:var(--bs-bg-disabled)}bs-circle-button .bs-circle-button{width:100%;height:100%}";

const BsCircleButton$1 = /*@__PURE__*/ proxyCustomElement(class BsCircleButton extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    /** Native attributes to pass through to the input element. */
    this.attrs = {};
    this.disabled = undefined;
    this.ghostBtn = undefined;
    this.hoverEffect = false;
    this.href = undefined;
    this.icon = undefined;
    this.iconPosition = undefined;
    this.label = undefined;
    this.passAttrs = '';
    this.textBtn = undefined;
    this.size = undefined;
  }
  get accessibleLabelAttr() {
    if (this.textBtn)
      return {};
    if (this.href)
      return { title: this.label };
    return { "aria-label": this.label };
  }
  get hoverDirection() {
    if (!this.hoverEffect)
      return undefined;
    return this.iconPosition || 'right';
  }
  get iconSize() {
    return this.size === 'sm' ? 'sm' : 'lg';
  }
  get textLeft() {
    return this.textBtn && this.iconPosition !== 'left';
  }
  get textRight() {
    return this.textBtn && this.iconPosition === 'left';
  }
  componentWillLoad() {
    this.attrs = getHostAttrs(this.hostEl, [
      'download',
      'target',
      'type',
      'title',
      ...this.passAttrs.split(','),
    ]);
  }
  render() {
    const { rootTag: TagName, buttonOrLinkAttrs } = getButtonOrLink(this, 'button');
    const IconTag = this.icon ? `bs-icon-${this.icon}` : null;
    return (h(Host, null, h(TagName, Object.assign({ class: "bs-circle-button", "data-direction": this.hoverDirection || undefined, "data-ghost": this.ghostBtn || undefined, "data-size": this.size || undefined, "data-text": this.textBtn || undefined, href: this.href || undefined }, this.attrs, buttonOrLinkAttrs, this.accessibleLabelAttr), this.textLeft && h("span", null, this.label), h("span", { class: "bs-circle-button-icon" }, IconTag && h(IconTag, { "data-size": this.iconSize })), this.textRight && h("span", null, this.label))));
  }
  get hostEl() { return this; }
  static get style() { return bsCircleButtonCss; }
}, [0, "bs-circle-button", {
    "disabled": [4],
    "ghostBtn": [4, "ghost-btn"],
    "hoverEffect": [4, "hover-effect"],
    "href": [1],
    "icon": [1],
    "iconPosition": [1, "icon-position"],
    "label": [1],
    "passAttrs": [1, "pass-attrs"],
    "textBtn": [4, "text-btn"],
    "size": [1]
  }]);
function defineCustomElement$1() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["bs-circle-button"];
  components.forEach(tagName => { switch (tagName) {
    case "bs-circle-button":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, BsCircleButton$1);
      }
      break;
  } });
}

const BsCircleButton = BsCircleButton$1;
const defineCustomElement = defineCustomElement$1;

export { BsCircleButton, defineCustomElement };

//# sourceMappingURL=bs-circle-button.js.map