@cbpds/web-components
Version:
Web components for the CBP Design System.
68 lines (62 loc) • 14.2 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
const index = require('./index-cd71cbd5.js');
const utils = require('./utils-99c9e716.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) {
index.registerInstance(this, hostRef);
this.open = false;
this.variant = undefined;
this.alignment = undefined;
this.fieldId = utils.createNamespaceKey('cbp-tooltip');
this.context = undefined;
this.sx = {};
}
componentWillLoad() {
if (typeof this.sx == 'string') {
this.sx = JSON.parse(this.sx) || {};
}
utils.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 utils.getInvertedContext(context);
}
currentElement = currentElement.parentElement;
}
}
render() {
return (index.h(index.Host, { key: 'f162a7a0a4c86a27e252087d5d2461ffa387577d', "aria-describedby": `${this.fieldId}`, role: "button", tabindex: "0", onfocus: () => this.open = true, onClick: () => this.host.focus() }, index.h("slot", { key: 'd4bcb6c1503a5a8532819ffd0199c8075f3eb082' }), index.h("div", { key: '128d1fca83f585361be5f52cf5411c88ee731fe1', role: "tooltip", id: `${this.fieldId}` }, index.h("div", { key: '0cbba979b9d34ccb5203d905a7ec91cbf05ecb6f' }, index.h("slot", { key: '2168846bc49e0b0e9f06d455b51580832b14fe2f', name: "cbp-tooltip-content" })), index.h("cbp-button", { key: 'dfbd2b35a5978aa0e43a294406f7e8a7979bdf13', class: "cbp-tooltip-close", type: "button", fill: "ghost", color: "secondary", context: this.invertContext(), variant: "square", accessibilityText: "Close Tooltip", onClick: () => this.dismissTooltip(), onKeyDown: (e) => this.handleFocusOut(e) }, index.h("cbp-icon", { key: '17995a877461780f0a0b019f9b9011aa06584734', name: "circle-xmark", size: "var(--cbp-space-5x)" })))));
}
get host() { return index.getElement(this); }
};
CbpTooltip.style = CbpTooltipStyle0;
exports.cbp_tooltip = CbpTooltip;
//# sourceMappingURL=cbp-tooltip.cjs.entry.js.map