@cbpds/web-components/dist/esm/cbp-skip-nav.entry.js

Web components for the CBP Design System.

/*!
 * CPB Design System web components - built with Stencil
 */
import { r as registerInstance, h, a as Host, g as getElement } from './index-6c11fa0c.js';
import { s as setCSSProps } from './utils-475ba472.js';

const cbpSkipNavCss = "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 CbpSkipNavStyle0 = cbpSkipNavCss;

const CbpSkipNav = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        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"))));
    }
    get host() { return getElement(this); }
};
CbpSkipNav.style = CbpSkipNavStyle0;

export { CbpSkipNav as cbp_skip_nav };

//# sourceMappingURL=cbp-skip-nav.entry.js.map