@cbpds/web-components
Version:
Web components for the CBP Design System.
5 lines • 2.11 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import{p as t,H as e,h as o,c as s}from"./p-9caf8482.js";import{s as i}from"./p-9c1b2f31.js";const c="cbp-skip-nav a{display:inline-block;padding:0.75rem 1.25rem;border-radius:var(--cbp-border-radius-softest);position:absolute;top:-1000rem;left:var(--cbp-space-1x);background-color:var(--cbp-color-black);color:var(--cbp-color-text-lightest);font-size:1rem;font-weight:var(--cbp-font-weight-bold);font-family:inherit}cbp-skip-nav a:active,cbp-skip-nav a:focus{top:var(--cbp-space-1x);text-decoration:none;outline-style:solid;outline-width:var(--cbp-border-size-md);outline-color:var(--cbp-button-color-outline-focus);outline-offset:calc(-1 * var(--cbp-space-1x));z-index:var(-cbp-z-index-level-top)}";const n=c;const a=t(class t extends e{constructor(){super();this.__registerHost();this.targetId="main";this.shortcutKey=undefined;this.sx={}}handleClick(t){t.preventDefault();t.stopPropagation();const e=document.querySelector(`#${this.targetId}`);if(e){e.focus()}}componentWillLoad(){const t=document.querySelector(`#${this.targetId}`);if(!t)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)||{}}i(this.link,Object.assign({},this.sx))}render(){return o(s,{key:"dac3142eed78f0c85ffaa9e9f0a5a4b3d0fadd37"},o("a",{key:"b2a7927f238d985ffacdbf6beb32fabc08c20982",href:this.targetId?`#${this.targetId}`:null,accessKey:this.shortcutKey,ref:t=>this.link=t,onClick:t=>this.handleClick(t)},o("slot",{key:"e9ea15fe4a1e8176777277fb96604ffd0ee40502"},"Skip to main content")))}get host(){return this}static get style(){return n}},[4,"cbp-skip-nav",{targetId:[1,"target-id"],shortcutKey:[1,"shortcut-key"],sx:[8]}]);function r(){if(typeof customElements==="undefined"){return}const t=["cbp-skip-nav"];t.forEach((t=>{switch(t){case"cbp-skip-nav":if(!customElements.get(t)){customElements.define(t,a)}break}}))}const p=a;const f=r;export{p as CbpSkipNav,f as defineCustomElement};
//# sourceMappingURL=cbp-skip-nav.js.map