import { h } from "@stencil/core";
import classNames from "classnames";
export class Link {
  constructor() {
    this.href = undefined;
    this.target = '_self';
    this.size = undefined;
    this.variant = 'bold';
  }
  render() {
    return (h("a", { "aria-label": 'a navigation link button', href: this.href, target: this.target, class: this.linkClassNames() }, h("slot", null)));
  }
  getSizeClass() {
    const small = this.size === 's' ? 'small' : null;
    const medium = this.size === 'm' ? 'medium' : null;
    const large = this.size === 'l' ? 'large' : null;
    const extraLarge = this.size === 'xl' ? 'extraLarge' : null;
    if (small) {
      return small;
    }
    else if (medium) {
      return medium;
    }
    else if (large) {
      return large;
    }
    else if (extraLarge && this.variant === 'underlined') {
      return 'large';
    }
    else if (extraLarge && this.variant !== 'underlined') {
      return extraLarge;
    }
    else
      return "";
  }
  getVariantClass() {
    const bold = this.variant === 'bold' ? 'bold' : null;
    const title = this.variant === 'title' ? 'title' : null;
    const underlined = this.variant === 'underlined' ? 'underlined' : null;
    const menu = this.variant === 'menu' ? 'menu' : null;
    if (bold) {
      return bold;
    }
    else if (title) {
      return title;
    }
    else if (underlined) {
      return underlined;
    }
    else if (menu) {
      return menu;
    }
    else
      return bold;
  }
  linkClassNames() {
    return classNames('link', 'primary', this.getVariantClass(), this.getSizeClass());
  }
  static get is() { return "ifx-link"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() {
    return {
      "$": ["link.scss"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["link.css"]
    };
  }
  static get properties() {
    return {
      "href": {
        "type": "string",
        "mutable": true,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "href",
        "reflect": false
      },
      "target": {
        "type": "string",
        "mutable": true,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "target",
        "reflect": false,
        "defaultValue": "'_self'"
      },
      "size": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "size",
        "reflect": false
      },
      "variant": {
        "type": "string",
        "mutable": true,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "variant",
        "reflect": false,
        "defaultValue": "'bold'"
      }
    };
  }
}
//# sourceMappingURL=link.js.map