@cbpds/web-components
Version:
Web components for the CBP Design System.
253 lines (252 loc) • 9.12 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import { Host, h } from "@stencil/core";
import { setCSSProps } from "../../utils/utils";
export class CbpLink {
constructor() {
this.href = undefined;
this.rel = undefined;
this.target = undefined;
this.download = undefined;
this.language = undefined;
this.shortcutKey = undefined;
this.accessibilityText = undefined;
this.disabled = undefined;
this.context = undefined;
this.sx = {};
}
handleClick(e) {
this.linkClick.emit({
host: this.host,
nativeElement: this.anchor,
href: this.href,
nativeEvent: e
});
}
;
componentWillLoad() {
if (typeof this.sx == 'string') {
this.sx = JSON.parse(this.sx) || {};
}
setCSSProps(this.host, Object.assign({}, this.sx));
}
componentDidLoad() {
if (!this.anchor) {
const slottedAnchor = (this.anchor = this.host.querySelector('a'));
if (slottedAnchor) {
this.anchor = slottedAnchor;
this.anchor.addEventListener('click', this.handleClick);
}
}
}
render() {
return (h(Host, { key: 'f674287d69929bfc1ae9559b8369175fe740280f' }, this.host.querySelector('[slot=cbp-link-custom]') ? (h("slot", { name: "cbp-link-custom" })) : (h("a", { href: this.disabled ? null : this.href, lang: this.language, target: this.target, download: this.download, rel: this.target == '_blank' ? ' noopener noreferrer' : null, "aria-label": this.accessibilityText, "aria-disabled": this.disabled ? 'true' : false, role: this.disabled ? 'link' : null, accessKey: this.shortcutKey, onClick: (e) => this.handleClick(e), ref: el => (this.anchor = el) }, h("slot", null)))));
}
static get is() { return "cbp-link"; }
static get originalStyleUrls() {
return {
"$": ["cbp-link.scss"]
};
}
static get styleUrls() {
return {
"$": ["cbp-link.css"]
};
}
static get properties() {
return {
"href": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the `href` of the rendered anchor."
},
"attribute": "href",
"reflect": false
},
"rel": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the `rel` attribute of the rendered anchor."
},
"attribute": "rel",
"reflect": false
},
"target": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the `target` attribute of the rendered anchor."
},
"attribute": "target",
"reflect": false
},
"download": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the `download` boolean attribute of the rendered anchor."
},
"attribute": "download",
"reflect": false
},
"language": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the `lang` attribute of the rendered anchor."
},
"attribute": "language",
"reflect": false
},
"shortcutKey": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Defines an `accesskey` attribute of the rendered anchor."
},
"attribute": "shortcut-key",
"reflect": false
},
"accessibilityText": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies an accessible label for the rendered anchor via `aria-label`."
},
"attribute": "accessibility-text",
"reflect": false
},
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies whether the the rendered anchor is \"disabled\". Creating disabled anchors may introduce accessibility concerns - use with caution."
},
"attribute": "disabled",
"reflect": true
},
"context": {
"type": "string",
"mutable": false,
"complexType": {
"original": "\"light-inverts\" | \"light-always\" | \"dark-inverts\" | \"dark-always\"",
"resolved": "\"dark-always\" | \"dark-inverts\" | \"light-always\" | \"light-inverts\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is \"light-inverts\" and does not have to be specified."
},
"attribute": "context",
"reflect": true
},
"sx": {
"type": "any",
"mutable": false,
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Supports adding inline styles as an object"
},
"attribute": "sx",
"reflect": false,
"defaultValue": "{}"
}
};
}
static get events() {
return [{
"method": "linkClick",
"name": "linkClick",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "A custom event emitted with the anchor is activated/clicked."
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}];
}
static get elementRef() { return "host"; }
}
//# sourceMappingURL=cbp-link.js.map