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

Web components for the CBP Design System.

/*!
 * CPB Design System web components - built with Stencil
 */
import{p as t,H as o,h as c,c as p}from"./p-9caf8482.js";import{c as e,s as l,f as a}from"./p-9c1b2f31.js";import{d as i}from"./p-c79ac5f9.js";import{d as r}from"./p-4cdb3206.js";const n=':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 b=n;const s=t(class t extends o{constructor(){super();this.__registerHost();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 c(p,{key:"f162a7a0a4c86a27e252087d5d2461ffa387577d","aria-describedby":`${this.fieldId}`,role:"button",tabindex:"0",onfocus:()=>this.open=true,onClick:()=>this.host.focus()},c("slot",{key:"d4bcb6c1503a5a8532819ffd0199c8075f3eb082"}),c("div",{key:"128d1fca83f585361be5f52cf5411c88ee731fe1",role:"tooltip",id:`${this.fieldId}`},c("div",{key:"0cbba979b9d34ccb5203d905a7ec91cbf05ecb6f"},c("slot",{key:"2168846bc49e0b0e9f06d455b51580832b14fe2f",name:"cbp-tooltip-content"})),c("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)},c("cbp-icon",{key:"17995a877461780f0a0b019f9b9011aa06584734",name:"circle-xmark",size:"var(--cbp-space-5x)"}))))}get host(){return this}static get style(){return b}},[4,"cbp-tooltip",{open:[516],variant:[513],alignment:[513],fieldId:[1,"field-id"],context:[513],sx:[8]},[[0,"keydown","handleKeyDown"]]]);function f(){if(typeof customElements==="undefined"){return}const t=["cbp-tooltip","cbp-button","cbp-icon"];t.forEach((t=>{switch(t){case"cbp-tooltip":if(!customElements.get(t)){customElements.define(t,s)}break;case"cbp-button":if(!customElements.get(t)){i()}break;case"cbp-icon":if(!customElements.get(t)){r()}break}}))}const m=s;const d=f;export{m as CbpTooltip,d as defineCustomElement};
//# sourceMappingURL=cbp-tooltip.js.map