@cbpds/web-components
Version:
Web components for the CBP Design System.
58 lines (54 loc) • 4.58 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-6c11fa0c.js';
import { s as setCSSProps } from './utils-475ba472.js';
const cbpLinkCss = ":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 CbpLinkStyle0 = cbpLinkCss;
const CbpLink = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.linkClick = createEvent(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(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)))));
}
get host() { return getElement(this); }
};
CbpLink.style = CbpLinkStyle0;
export { CbpLink as cbp_link };
//# sourceMappingURL=cbp-link.entry.js.map