@scania/tegel
Version:
Tegel Design System
116 lines (115 loc) • 3.8 kB
JavaScript
import { h } from "@stencil/core";
/**
* @slot <default> - <b>Unnamed slot.</b> For a link element. Eg. <code><a><a></code>.
*/
export class TdsLink {
constructor() {
/** Disables the Link */
this.disabled = false;
/** Displays the Link with an underline. */
this.underline = true;
/** Displays the Link as a standalone component. Not part of a paragraph. */
this.standalone = false;
}
connectedCallback() {
const links = this.host.querySelectorAll('a');
if (links.length > 1) {
console.warn('tds-link is only intended to wrap one <a> tag');
}
const link = links[0];
if (link) {
if (this.disabled) {
link.setAttribute('tabindex', '-1');
link.setAttribute('aria-disabled', 'true');
}
else {
link.removeAttribute('tabindex');
link.removeAttribute('aria-disabled');
}
}
}
render() {
return (h("span", { key: '4b56921da22a5b976ebf4985d04e8af3b5917329', class: {
'disabled': this.disabled,
'no-underline': !this.underline,
'standalone': this.standalone,
} }, h("slot", { key: 'bad6ba1260f82de37b1939d2cca208053e52126b' })));
}
static get is() { return "tds-link"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["link.scss"]
};
}
static get styleUrls() {
return {
"$": ["link.css"]
};
}
static get properties() {
return {
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Disables the Link"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "disabled",
"defaultValue": "false"
},
"underline": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Displays the Link with an underline."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "underline",
"defaultValue": "true"
},
"standalone": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Displays the Link as a standalone component. Not part of a paragraph."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "standalone",
"defaultValue": "false"
}
};
}
static get elementRef() { return "host"; }
}