@cbpds/web-components/dist/components/cbp-link.js

Web components for the CBP Design System.

/*!
 * CPB Design System web components - built with Stencil
 */
import{p as i,H as c,d as o,h as t,c as l}from"./p-9caf8482.js";import{s as r}from"./p-9c1b2f31.js";const e=":root{--cbp-link-color:var(--cbp-color-interactive-primary-dark);--cbp-link-color-dark:var(--cbp-color-interactive-primary-light);--cbp-link-color-visited:var(--cbp-color-interactive-visited-dark);--cbp-link-color-visited-dark:var(--cbp-color-interactive-visited-light);--cbp-link-color-hover:var(--cbp-color-interactive-primary-darker);--cbp-link-color-hover-dark:var(--cbp-color-interactive-primary-lighter);--cbp-link-color-focus:var(--cbp-color-interactive-focus-dark);--cbp-link-color-focus-dark:var(--cbp-color-interactive-focus-light);--cbp-link-color-active:var(--cbp-color-interactive-focus-dark);--cbp-link-color-active-dark:var(--cbp-color-interactive-focus-light);--cbp-link-color-outline-focus:var(--cbp-color-interactive-focus-dark);--cbp-link-color-outline-focus-dark:var(--cbp-color-interactive-focus-light);--cbp-link-color-disabled:var(--cbp-color-interactive-disabled-dark);--cbp-link-color-disabled-dark:var(--cbp-color-interactive-disabled-light);--cbp-link-gap:0 var(--cbp-space-1x);--cbp-link-gap-lg:0 var(--cbp-space-2x)}[data-cbp-theme=light] cbp-link[context*=dark],[data-cbp-theme=dark] cbp-link:not([context=dark-inverts]):not([context=light-always]){--cbp-link-color:var(--cbp-link-color-dark);--cbp-link-color-visited:var(--cbp-link-color-visited-dark);--cbp-link-color-hover:var(--cbp-link-color-hover-dark);--cbp-link-color-focus:var(--cbp-link-color-focus-dark);--cbp-link-color-active:var(--cbp-link-color-active-dark);--cbp-link-color-outline-focus:var(--cbp-link-color-outline-focus-dark);--cbp-link-color-disabled:var(--cbp-link-color-disabled-dark)}cbp-link a{display:inline-flex;align-items:baseline;gap:var(--cbp-link-gap);color:var(--cbp-link-color);outline-width:0;outline-style:solid;outline-color:var(--cbp-link-color-outline-focus);outline-offset:var(--cbp-space-1x)}cbp-link a:link{text-decoration:underline}cbp-link a:visited:not(:hover):not(:active):not(:focus){color:var(--cbp-link-color-visited)}cbp-link a:hover{--cbp-link-color:var(--cbp-link-color-hover)}cbp-link a:focus{--cbp-link-color:var(--cbp-link-color-focus);outline-width:var(--cbp-border-size-md)}cbp-link a:active{--cbp-link-color:var(--cbp-link-color-active)}cbp-link a[aria-disabled=true]{--cbp-link-color:var(--cbp-link-color-disabled);font-style:italic;text-decoration:underline;cursor:not-allowed}";const n=e;const a=i(class i extends c{constructor(){super();this.__registerHost();this.linkClick=o(this,"linkClick",7);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(i){this.linkClick.emit({host:this.host,nativeElement:this.anchor,href:this.href,nativeEvent:i})}componentWillLoad(){if(typeof this.sx=="string"){this.sx=JSON.parse(this.sx)||{}}r(this.host,Object.assign({},this.sx))}componentDidLoad(){if(!this.anchor){const i=this.anchor=this.host.querySelector("a");if(i){this.anchor=i;this.anchor.addEventListener("click",this.handleClick)}}}render(){return t(l,{key:"f674287d69929bfc1ae9559b8369175fe740280f"},this.host.querySelector("[slot=cbp-link-custom]")?t("slot",{name:"cbp-link-custom"}):t("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:i=>this.handleClick(i),ref:i=>this.anchor=i},t("slot",null)))}get host(){return this}static get style(){return n}},[4,"cbp-link",{href:[1],rel:[1],target:[1],download:[4],language:[1],shortcutKey:[1,"shortcut-key"],accessibilityText:[1,"accessibility-text"],disabled:[516],context:[513],sx:[8]}]);function s(){if(typeof customElements==="undefined"){return}const i=["cbp-link"];i.forEach((i=>{switch(i){case"cbp-link":if(!customElements.get(i)){customElements.define(i,a)}break}}))}const p=a;const b=s;export{p as CbpLink,b as defineCustomElement};
//# sourceMappingURL=cbp-link.js.map