import { h } from '@stencil/core';
export class EclLink {
  constructor() {
    this.theme = 'ec';
    this.path = undefined;
    this.styleClass = undefined;
    this.variant = 'default';
    this.titleAttr = undefined;
    this.external = false;
    this.ariaLabel = undefined;
    this.name = undefined;
  }
  getClass() {
    const styleClasses = [
      `ecl-link`,
      `ecl-link--${this.variant}`,
      this.styleClass
    ];
    if (this.el.querySelector('ecl-icon')) {
      styleClasses.push('ecl-link--icon');
      if (this.el.querySelector('ecl-icon').getAttribute('slot') === 'icon-after') {
        styleClasses.push('ecl-link--icon-after');
      }
      else {
        styleClasses.push('ecl-link--icon-before');
      }
    }
    return styleClasses.join(' ');
  }
  componentDidRender() {
    const dataAttrs = Object.keys(this.el.dataset);
    if (dataAttrs) {
      dataAttrs.forEach((attr) => {
        const link = this.el.firstElementChild;
        link.dataset[attr] = '';
        delete this.el.dataset[attr];
      });
    }
    if (this.el.querySelector('ecl-icon')) {
      this.el.querySelector('ecl-icon svg').classList.add('ecl-link__icon');
      if (this.el.querySelector('ecl-icon').getAttribute('slot') === 'icon-after') {
        this.el.querySelector('ecl-icon svg').classList.add('ecl-link__icon--after');
      }
      else {
        this.el.querySelector('ecl-icon svg').classList.add('ecl-link__icon--before');
      }
    }
  }
  getExternal() {
    return (h("ecl-icon", { icon: "external", "style-class": `ecl-link__icon ecl-link__icon--after sc-ecl-link-${this.theme}`, size: "2xs" }));
  }
  getAttrs() {
    const attrs = {
      'class': this.getClass(),
      'href': this.path,
    };
    if (this.titleAttr) {
      attrs['title'] = this.titleAttr;
    }
    if (this.ariaLabel) {
      attrs['aria-label'] = this.ariaLabel;
    }
    return attrs;
  }
  render() {
    return (h("a", Object.assign({}, this.getAttrs()), h("slot", { name: "icon-before" }), h("slot", null), h("slot", { name: "icon-after" }, this.external ? this.getExternal() : '')));
  }
  static get is() { return "ecl-link"; }
  static get originalStyleUrls() {
    return {
      "ec": ["./build/styles/ecl-link-ec.css"],
      "eu": ["./build/styles/ecl-link-eu.css"]
    };
  }
  static get styleUrls() {
    return {
      "ec": ["./build/styles/ecl-link-ec.css"],
      "eu": ["./build/styles/ecl-link-eu.css"]
    };
  }
  static get assetsDirs() { return ["build"]; }
  static get properties() {
    return {
      "theme": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "theme",
        "reflect": false,
        "defaultValue": "'ec'"
      },
      "path": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "path",
        "reflect": false
      },
      "styleClass": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "style-class",
        "reflect": false
      },
      "variant": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "variant",
        "reflect": false,
        "defaultValue": "'default'"
      },
      "titleAttr": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "title-attr",
        "reflect": false
      },
      "external": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "external",
        "reflect": false,
        "defaultValue": "false"
      },
      "ariaLabel": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "aria-label",
        "reflect": false
      },
      "name": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "name",
        "reflect": false
      }
    };
  }
  static get elementRef() { return "el"; }
}
//# sourceMappingURL=ecl-link.js.map
