@cbpds/web-components
Version:
Web components for the CBP Design System.
103 lines (102 loc) • 3.64 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import { Host, h } from "@stencil/core";
import { setCSSProps } from "../../utils/utils";
export class CbpSkipNav {
constructor() {
this.targetId = "main";
this.shortcutKey = undefined;
this.sx = {};
}
handleClick(e) {
e.preventDefault();
e.stopPropagation();
const target = document.querySelector(`#${this.targetId}`);
if (target) {
target.focus();
}
}
componentWillLoad() {
const target = document.querySelector(`#${this.targetId}`);
if (!target)
console.warn(`Configuration Error (cbp-skip-nav): The specified targetId of "${this.targetId}" cannot be found in the current page.`);
if (typeof this.sx == 'string') {
this.sx = JSON.parse(this.sx) || {};
}
setCSSProps(this.link, Object.assign({}, this.sx));
}
render() {
return (h(Host, { key: 'dac3142eed78f0c85ffaa9e9f0a5a4b3d0fadd37' }, h("a", { key: 'b2a7927f238d985ffacdbf6beb32fabc08c20982', href: this.targetId ? `#${this.targetId}` : null, accessKey: this.shortcutKey, ref: (el) => this.link = el, onClick: (e) => this.handleClick(e) }, h("slot", { key: 'e9ea15fe4a1e8176777277fb96604ffd0ee40502' }, "Skip to main content"))));
}
static get is() { return "cbp-skip-nav"; }
static get originalStyleUrls() {
return {
"$": ["cbp-skip-nav.scss"]
};
}
static get styleUrls() {
return {
"$": ["cbp-skip-nav.css"]
};
}
static get properties() {
return {
"targetId": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the target `id` where focus is sent when the \"skip nav\" link is activated. Defaults to \"main\"."
},
"attribute": "target-id",
"reflect": false,
"defaultValue": "\"main\""
},
"shortcutKey": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies a shortcut key, which is applied as an `accessKey` attribute."
},
"attribute": "shortcut-key",
"reflect": false
},
"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 elementRef() { return "host"; }
}
//# sourceMappingURL=cbp-skip-nav.js.map