@cbpds/web-components
Version:
Web components for the CBP Design System.
64 lines (60 loc) • 14.1 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import { r as registerInstance, h, a as Host, g as getElement } from './index-0f6e3adc.js';
import { c as createNamespaceKey, s as setCSSProps, a as getInvertedContext } from './utils-475ba472.js';
const cbpTooltipCss = ":root{--cbp-tooltip-color:var(--cbp-color-text-lightest);--cbp-tooltip-color-dark:var(--cbp-color-text-darkest);--cbp-tooltip-color-bg:var(--cbp-color-gray-cool-80);--cbp-tooltip-color-bg-dark:var(--cbp-color-gray-cool-5);--cbp-tooltip-gap:0px;--cbp-tooltip-offset:0px;--cbp-tooltip-caret-size:14px;--cbp-tooltip-caret-offset:calc(var(--cbp-tooltip-caret-size) / 2);--cbp-tooltip-caret-space:var(--cbp-space-4x);--cbp-tooltip-control-color-hover:var(--cbp-color-interactive-secondary-darker);--cbp-tooltip-control-color-hover-dark:var(--cbp-color-text-darkest);--cbp-tooltip-control-color-bg-hover:var(--cbp-color-interactive-secondary-lighter);--cbp-tooltip-control-color-bg-hover-dark:var(--cbp-color-interactive-disabled-light);--cbp-tooltip-control-color-focus:var(--cbp-color-text-lightest);--cbp-tooltip-control-color-focus-dark:var(--cbp-color-text-darkest);--cbp-tooltip-control-color-bg-focus:var(--cbp-color-interactive-focus-dark);--cbp-tooltip-control-color-bg-focus-dark:var(--cbp-color-interactive-focus-light);--cbp-tooltip-control-outline-focus:2px solid var(--cbp-color-white);--cbp-tooltip-control-outline-focus-dark:2px solid var(--cbp-color-black);--cbp-tooltip-definition-color:var(--cbp-color-interactive-primary-dark);--cbp-tooltip-definition-color-dark:var(--cbp-color-interactive-primary-light);--cbp-tooltip-definition-color-hover:var(--cbp-color-interactive-primary-darker);--cbp-tooltip-definition-color-hover-dark:var(--cbp-color-interactive-primary-lighter);--cbp-tooltip-definition-color-focus:var(--cbp-color-interactive-focus-dark);--cbp-tooltip-definition-color-focus-dark:var(--cbp-color-interactive-focus-light);--cbp-tooltip-definition-outline-focus:2px solid var(--cbp-color-interactive-focus-dark);--cbp-tooltip-definition-outline-focus-dark:2px solid var(--cbp-color-interactive-focus-light)}[data-cbp-theme=light] cbp-tooltip[context*=dark]:not([context=light-always]),[data-cbp-theme=dark] cbp-tooltip:not([context=dark-inverts]):not([context=light-always]){--cbp-tooltip-color-bg:var(--cbp-tooltip-color-bg-dark);--cbp-tooltip-color:var(--cbp-tooltip-color-dark);--cbp-tooltip-control-color-hover:var(--cbp-tooltip-control-color-hover-dark);--cbp-tooltip-control-color-bg-hover:var(--cbp-tooltip-control-color-bg-hover-dark);--cbp-tooltip-control-color-focus:var(--cbp-tooltip-control-color-focus-dark);--cbp-tooltip-control-color-bg-focus:var(--cbp-tooltip-control-color-bg-focus-dark);--cbp-tooltip-control-outline-focus:var(--cbp-tooltip-control-outline-focus-dark);--cbp-tooltip-definition-color:var(--cbp-tooltip-definition-color-dark);--cbp-tooltip-definition-color-hover:var(--cbp-tooltip-definition-color-hover-dark);--cbp-tooltip-definition-color-focus:var(--cbp-tooltip-definition-color-focus-dark);--cbp-tooltip-definition-outline-focus:var(--cbp-tooltip-definition-outline-focus-dark)}cbp-tooltip{display:inline-flex;align-items:center;justify-content:center;position:relative;border-radius:var(--cbp-border-radius-soft);padding:var(--cbp-space-1x);outline-offset:calc(-1 * var(--cbp-space-1x));--cbp-tooltip-placement-gap:var(--cbp-tooltip-gap);--cbp-tooltip-placement-offset:var(--cbp-tooltip-offset);--cbp-tooltip-gap:var(--cbp-space-4x, 1rem);}cbp-tooltip[open] [role=tooltip]{display:flex}cbp-tooltip:hover{color:var(--cbp-tooltip-control-color-hover);background:var(--cbp-tooltip-control-color-bg-hover)}cbp-tooltip:focus-visible,cbp-tooltip:focus-within{color:var(--cbp-tooltip-control-color-focus);background:var(--cbp-tooltip-control-color-bg-focus);outline:var(--cbp-tooltip-control-outline-focus)}cbp-tooltip[variant=definition]{font-size:var(--cbp-font-size-body);color:var(--cbp-tooltip-definition-color);text-decoration:underline;text-decoration-style:dotted;cursor:pointer}cbp-tooltip[variant=definition]:hover{color:var(--cbp-tooltip-definition-color-hover);background-color:transparent}cbp-tooltip[variant=definition]:focus,cbp-tooltip[variant=definition]:focus-visible,cbp-tooltip[variant=definition]:focus-within{color:var(--cbp-tooltip-definition-color-focus);background-color:transparent;outline:var(--cbp-tooltip-definition-outline-focus)}cbp-tooltip[alignment=top-left]{--cbp-tooltip-placement-top:calc(0px - var(--cbp-tooltip-placement-gap, 5px));--cbp-tooltip-placement-left:calc(0px + var(--cbp-tooltip-placement-offset, 0px));--cbp-tooltip-placement-bottom:unset;--cbp-tooltip-placement-transform-x:0;--cbp-tooltip-placement-transform-y:-100%;--cbp-tooltip-caret-rotation:315deg;--cbp-tooltip-caret-top:calc(100% - var(--cbp-tooltip-caret-offset));--cbp-tooltip-caret-left:calc(0% + var(--cbp-tooltip-caret-space))}cbp-tooltip[alignment=top-center]{--cbp-tooltip-placement-top:calc(0% - var(--cbp-tooltip-placement-gap, 5px));--cbp-tooltip-placement-left:50%;--cbp-tooltip-placement-bottom:unset;--cbp-tooltip-placement-transform-x:-50%;--cbp-tooltip-placement-transform-y:-100%;--cbp-tooltip-caret-rotation:315deg;--cbp-tooltip-caret-top:calc(100% - var(--cbp-tooltip-caret-offset));--cbp-tooltip-caret-left:calc(50% - var(--cbp-tooltip-caret-offset))}cbp-tooltip[alignment=top-right]{--cbp-tooltip-placement-top:calc(0px - var(--cbp-tooltip-placement-gap, 5px));--cbp-tooltip-placement-left:calc(100% + var(--cbp-tooltip-placement-offset, 0px));--cbp-tooltip-placement-bottom:unset;--cbp-tooltip-placement-transform-x:-100%;--cbp-tooltip-placement-transform-y:-100%;--cbp-tooltip-caret-rotation:315deg;--cbp-tooltip-caret-top:calc(100% - var(--cbp-tooltip-caret-offset));--cbp-tooltip-caret-left:calc(100% - (var(--cbp-tooltip-caret-size) + var(--cbp-tooltip-caret-space)))}cbp-tooltip[alignment=right-top]{--cbp-tooltip-placement-top:calc(0px + var(--cbp-tooltip-placement-offset, 0px));--cbp-tooltip-placement-left:calc(100% + var(--cbp-tooltip-placement-gap, 5px));--cbp-tooltip-placement-bottom:unset;--cbp-tooltip-placement-transform-x:0;--cbp-tooltip-placement-transform-y:0%;--cbp-tooltip-caret-rotation:45deg;--cbp-tooltip-caret-top:calc(0% + var(--cbp-tooltip-caret-space));--cbp-tooltip-caret-left:calc(0% - var(--cbp-tooltip-caret-offset))}cbp-tooltip[alignment=right-center]{--cbp-tooltip-placement-top:50%;--cbp-tooltip-placement-left:calc(100% + var(--cbp-tooltip-placement-gap, 5px));--cbp-tooltip-placement-bottom:unset;--cbp-tooltip-placement-transform-x:0;--cbp-tooltip-placement-transform-y:-50%;--cbp-tooltip-caret-rotation:45deg;--cbp-tooltip-caret-top:calc(50% - var(--cbp-tooltip-caret-offset));--cbp-tooltip-caret-left:calc(0% - var(--cbp-tooltip-caret-offset))}cbp-tooltip[alignment=right-bottom]{--cbp-tooltip-placement-top:unset;--cbp-tooltip-placement-left:calc(100% + var(--cbp-tooltip-placement-gap, 5px));--cbp-tooltip-placement-bottom:0%;--cbp-tooltip-placement-transform-x:0;--cbp-tooltip-placement-transform-y:0;--cbp-tooltip-caret-rotation:45deg;--cbp-tooltip-caret-top:calc(100% - var(--cbp-tooltip-caret-size) - var(--cbp-tooltip-caret-space));--cbp-tooltip-caret-left:calc(0% - var(--cbp-tooltip-caret-offset))}cbp-tooltip[alignment=bottom-left]{--cbp-tooltip-placement-top:calc(100% + var(--cbp-tooltip-placement-gap, 5px));--cbp-tooltip-placement-left:calc(0px + var(--cbp-tooltip-placement-offset, 0px));--cbp-tooltip-placement-bottom:unset;--cbp-tooltip-placement-transform-x:0;--cbp-tooltip-placement-transform-y:0;--cbp-tooltip-caret-rotation:135deg;--cbp-tooltip-caret-left:calc(0% + var(--cbp-tooltip-caret-space));--cbp-tooltip-caret-top:calc(0% - var(--cbp-tooltip-caret-offset))}cbp-tooltip[alignment=bottom-center]{--cbp-tooltip-placement-top:calc(100% + var(--cbp-tooltip-placement-gap, 5px));--cbp-tooltip-placement-left:50%;--cbp-tooltip-placement-bottom:unset;--cbp-tooltip-placement-transform-x:-50%;--cbp-tooltip-placement-transform-y:0;--cbp-tooltip-caret-rotation:135deg;--cbp-tooltip-caret-left:calc(50% - var(--cbp-tooltip-caret-offset));--cbp-tooltip-caret-top:calc(0% - var(--cbp-tooltip-caret-offset))}cbp-tooltip[alignment=bottom-right]{--cbp-tooltip-placement-top:calc(100% + var(--cbp-tooltip-placement-gap, 5px));--cbp-tooltip-placement-left:calc(100% + var(--cbp-tooltip-placement-offset, 0px));--cbp-tooltip-placement-bottom:unset;--cbp-tooltip-placement-transform-x:-100%;--cbp-tooltip-placement-transform-y:0;--cbp-tooltip-caret-rotation:135deg;--cbp-tooltip-caret-left:calc(100% - (var(--cbp-tooltip-caret-size) + var(--cbp-tooltip-caret-space)));--cbp-tooltip-caret-top:calc(0% - var(--cbp-tooltip-caret-offset))}cbp-tooltip[alignment=left-top]{--cbp-tooltip-placement-top:calc(0% + var(--cbp-tooltip-placement-offset, 0px));--cbp-tooltip-placement-left:calc(0% - var(--cbp-tooltip-placement-gap, 5px));--cbp-tooltip-placement-bottom:unset;--cbp-tooltip-placement-transform-x:-100%;--cbp-tooltip-placement-transform-y:0%;--cbp-tooltip-caret-rotation:225deg;--cbp-tooltip-caret-top:calc(0% + var(--cbp-tooltip-caret-space));--cbp-tooltip-caret-left:calc(100% - var(--cbp-tooltip-caret-offset))}cbp-tooltip[alignment=left-center]{--cbp-tooltip-placement-top:50%;--cbp-tooltip-placement-left:calc(0% - var(--cbp-tooltip-placement-gap, 5px));--cbp-tooltip-placement-bottom:unset;--cbp-tooltip-placement-transform-x:-100%;--cbp-tooltip-placement-transform-y:-50%;--cbp-tooltip-caret-rotation:225deg;--cbp-tooltip-caret-top:calc(50% - var(--cbp-tooltip-caret-offset));--cbp-tooltip-caret-left:calc(100% - var(--cbp-tooltip-caret-offset))}cbp-tooltip[alignment=left-bottom]{--cbp-tooltip-placement-top:unset;--cbp-tooltip-placement-left:calc(0% - var(--cbp-tooltip-placement-gap, 5px));--cbp-tooltip-placement-bottom:0%;--cbp-tooltip-placement-transform-x:-100%;--cbp-tooltip-placement-transform-y:0%;--cbp-tooltip-caret-rotation:225deg;--cbp-tooltip-caret-top:calc(100% - var(--cbp-tooltip-caret-size) - var(--cbp-tooltip-caret-space));--cbp-tooltip-caret-left:calc(100% - var(--cbp-tooltip-caret-offset))}cbp-tooltip div[role=tooltip]{display:none;position:absolute;top:var(--cbp-tooltip-placement-top);left:var(--cbp-tooltip-placement-left);bottom:var(--cbp-tooltip-placement-bottom);height:var(--tooltip-height, auto);padding:var(--cbp-space-1x);min-height:var(--cbp-space-11x);width:max-content;max-width:33vw;transform:translate(var(--cbp-tooltip-placement-transform-x, 0), var(--cbp-tooltip-placement-transform-y, 0));border-style:solid;border-width:0px;border-color:none;border-radius:var(--cbp-border-radius-softer);background-color:var(--cbp-tooltip-color-bg);color:var(--cbp-tooltip-color);font-size:var(--cbp-font-size-body);font-weight:var(--cbp-font-weight-regular);text-underline-offset:initial;box-shadow:var(--cbp-shadow-level-1-center);z-index:var(--cbp-z-index-level-1)}cbp-tooltip div[role=tooltip]>div{padding:var(--cbp-space-1x)}cbp-tooltip div[role=tooltip]>div [slot=cbp-tooltip-content]{line-height:var(--cbp-line-height-xs)}cbp-tooltip div[role=tooltip]::before{content:\"\";position:absolute;display:var(--cbp-caret-display, block);width:var(--cbp-tooltip-caret-size);height:var(--cbp-tooltip-caret-size);left:var(--cbp-tooltip-caret-left);top:var(--cbp-tooltip-caret-top);transform-origin:center;transform:rotate(var(--cbp-tooltip-caret-rotation));clip-path:polygon(8% 0, 100% 92%, 100% 100%, 0 100%, 0 0);border:inherit;background-color:inherit;box-shadow:var(--cbp-shadow-level-1-center)}";
const CbpTooltipStyle0 = cbpTooltipCss;
const CbpTooltip = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.open = false;
this.variant = undefined;
this.alignment = undefined;
this.fieldId = createNamespaceKey('cbp-tooltip');
this.context = undefined;
this.sx = {};
}
componentWillLoad() {
if (typeof this.sx == 'string') {
this.sx = JSON.parse(this.sx) || {};
}
setCSSProps(this.host, Object.assign({}, this.sx));
}
dismissTooltip() {
this.host.focus();
this.open = false;
}
handleFocusOut({ key, shiftKey }) {
if (key == 'Tab' && !shiftKey)
this.open = false;
}
handleKeyDown(ev) {
if (ev.key == 'Escape') {
this.dismissTooltip();
}
}
invertContext() {
let currentElement = this.host;
let context;
while (currentElement) {
if (currentElement.hasAttribute('context') || currentElement.hasAttribute('data-cbp-theme')) {
if (currentElement.hasAttribute('context')) {
context = currentElement.getAttribute('context');
}
else {
context = currentElement.getAttribute('data-cbp-theme');
}
return getInvertedContext(context);
}
currentElement = currentElement.parentElement;
}
}
render() {
return (h(Host, { key: 'b9e2570f044de09727c00830771c5aebe93e29d0', "aria-describedby": `${this.fieldId}`, role: "button", tabindex: "0", onfocus: () => this.open = true, onClick: () => this.host.focus() }, h("slot", { key: 'fe87172dedabf627c8e8b4fe64f64e0b7b17bb3e' }), h("div", { key: 'b236ba9d75e6df46b32710ccbf7dbcb37dc7ed3d', role: "tooltip", id: `${this.fieldId}` }, h("div", { key: '73b64eef6548e25a990324f4ae3bc0ab89ba4d48' }, h("slot", { key: '944fe4430dbb8d612d35690e83fe7b23ce72371e', name: "cbp-tooltip-content" })), h("cbp-button", { key: '4175a0036c8946750a0d4128927614aa7402547d', class: "cbp-tooltip-close", type: "button", fill: "ghost", color: "secondary", context: this.invertContext(), variant: "square", onClick: () => this.dismissTooltip(), onKeyDown: (e) => this.handleFocusOut(e) }, h("cbp-icon", { key: '38b3a8911bfc8d4fdc049c7c373270ceff09773d', name: "circle-xmark", size: "var(--cbp-space-5x)" })))));
}
get host() { return getElement(this); }
};
CbpTooltip.style = CbpTooltipStyle0;
export { CbpTooltip as cbp_tooltip };
//# sourceMappingURL=cbp-tooltip.entry.js.map