@cbpds/web-components
Version:
Web components for the CBP Design System.
5 lines • 13.1 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import{r as t,h as o,a as c,g as p}from"./p-654179c2.js";import{c as e,s as l,a}from"./p-93ade441.js";const i=':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 r=i;const n=class{constructor(o){t(this,o);this.open=false;this.variant=undefined;this.alignment=undefined;this.fieldId=e("cbp-tooltip");this.context=undefined;this.sx={}}componentWillLoad(){if(typeof this.sx=="string"){this.sx=JSON.parse(this.sx)||{}}l(this.host,Object.assign({},this.sx))}dismissTooltip(){this.host.focus();this.open=false}handleFocusOut({key:t,shiftKey:o}){if(t=="Tab"&&!o)this.open=false}handleKeyDown(t){if(t.key=="Escape"){this.dismissTooltip()}}invertContext(){let t=this.host;let o;while(t){if(t.hasAttribute("context")||t.hasAttribute("data-cbp-theme")){if(t.hasAttribute("context")){o=t.getAttribute("context")}else{o=t.getAttribute("data-cbp-theme")}return a(o)}t=t.parentElement}}render(){return o(c,{key:"f162a7a0a4c86a27e252087d5d2461ffa387577d","aria-describedby":`${this.fieldId}`,role:"button",tabindex:"0",onfocus:()=>this.open=true,onClick:()=>this.host.focus()},o("slot",{key:"d4bcb6c1503a5a8532819ffd0199c8075f3eb082"}),o("div",{key:"128d1fca83f585361be5f52cf5411c88ee731fe1",role:"tooltip",id:`${this.fieldId}`},o("div",{key:"0cbba979b9d34ccb5203d905a7ec91cbf05ecb6f"},o("slot",{key:"2168846bc49e0b0e9f06d455b51580832b14fe2f",name:"cbp-tooltip-content"})),o("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:t=>this.handleFocusOut(t)},o("cbp-icon",{key:"17995a877461780f0a0b019f9b9011aa06584734",name:"circle-xmark",size:"var(--cbp-space-5x)"}))))}get host(){return p(this)}};n.style=r;export{n as cbp_tooltip};
//# sourceMappingURL=p-db94bc1f.entry.js.map