import { Host, h } from '@stencil/core';
import { getHostAttrs } from '../../utils';
import { getButtonOrLink } from '../../utils/getButtonOrLink';
/**
 * Outputs a button or anchor tag using the BSDS button styles.
 * @docsPage
 */
export class BsCircleButton {
  constructor() {
    /** 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))));
  }
  static get is() { return "bs-circle-button"; }
  static get originalStyleUrls() {
    return {
      "$": ["bs-circle-button.scss"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["bs-circle-button.css"]
    };
  }
  static get properties() {
    return {
      "disabled": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Sets the disabled state on the button."
        },
        "attribute": "disabled",
        "reflect": false
      },
      "ghostBtn": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Apply the ghost button style. See data-ghost in the button docs for details."
        },
        "attribute": "ghost-btn",
        "reflect": false
      },
      "hoverEffect": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Set to `true` to apply hover transition effect (icon translates left or right)."
        },
        "attribute": "hover-effect",
        "reflect": false,
        "defaultValue": "false"
      },
      "href": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Pass in a url to convert a button to an anchor tag."
        },
        "attribute": "href",
        "reflect": false
      },
      "icon": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Pass in kebab-cased icon name to display an icon on the left; e.g., \"case-study\""
        },
        "attribute": "icon",
        "reflect": false
      },
      "iconPosition": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "\"left\" | \"right\"",
          "resolved": "\"left\" | \"right\"",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Set the position of the icon in relation to button text."
        },
        "attribute": "icon-position",
        "reflect": false
      },
      "label": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "REQUIRED! Pass in text to be used as aria-label or title for non-text buttons or links, respectively, or as the button text for text buttons."
        },
        "attribute": "label",
        "reflect": false
      },
      "passAttrs": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "List additional attributes (csv format) to pass through to <button> or <a>."
        },
        "attribute": "pass-attrs",
        "reflect": false,
        "defaultValue": "''"
      },
      "textBtn": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Set to `true` to display the label as text alongside the circle icon."
        },
        "attribute": "text-btn",
        "reflect": false
      },
      "size": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "'sm'",
          "resolved": "\"sm\"",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Sets the size of the button."
        },
        "attribute": "size",
        "reflect": false
      }
    };
  }
  static get elementRef() { return "hostEl"; }
}
//# sourceMappingURL=bs-circle-button.js.map
