v4web-components/dist/stencil-library/p-2b4718a8.entry.js

Stencil Component Starter

import{r as e,h as t}from"./p-c2aeec95.js";const r=".v4-tooltip{position:relative;display:inline-flex}.tooltip-container .triangle{width:1rem;height:1rem;position:absolute;box-shadow:var(--lab-ds-semantic-container-shadow-l);z-index:-2;background-color:var(--lab-ds-semantic-selectable-color-bg-default);border-color:var(--lab-ds-semantic-selectable-color-border-default);border-radius:0.5px;border-style:solid}.tooltip-container{visibility:hidden;position:absolute;min-width:8.75rem;z-index:999;box-shadow:var(--lab-ds-semantic-container-shadow-l);outline-style:solid;outline-offset:-1px;outline-width:var(--lab-ds-semantic-selectable-border-width-s);border-radius:var(--lab-ds-semantic-selectable-border-radius-xs);outline-color:var(--lab-ds-semantic-selectable-color-border-default);color:var(--lab-ds-semantic-color-fg-default);font:var(--lab-ds-semantic-typography-body-none-decoration-p3-regular);transition:border 0.1s ease-in-out}.label{text-align:center;border-radius:var(--lab-ds-semantic-selectable-border-radius-xs);padding:var(--lab-ds-semantic-selectable-space-padding-m);background-color:var(--lab-ds-semantic-selectable-color-bg-default)}.v4-tooltip:hover .tooltip-container{visibility:visible}.three-hours .tooltip-container{top:-50%;right:calc(100% + 0.6rem)}.three-hours .tooltip-container .triangle{left:calc(100% - 0.6rem);bottom:35%;border-width:var(--lab-ds-semantic-selectable-border-width-s) var(--lab-ds-semantic-selectable-border-width-s) 0 0;transform:rotate(45deg)}.nine-hours .tooltip-container{top:-50%;left:calc(100% + 0.6rem)}.nine-hours .tooltip-container .triangle{right:calc(100% - 0.6rem);bottom:35%;border-width:0 0 var(--lab-ds-semantic-selectable-border-width-s) var(--lab-ds-semantic-selectable-border-width-s);transform:rotate(45deg)}.five-hours .tooltip-container{bottom:calc(100% + 0.6rem);left:0;right:0}.five-hours .tooltip-container .triangle{top:calc(100% - 0.6rem);right:15%;border-width:0 0 var(--lab-ds-semantic-selectable-border-width-s) var(--lab-ds-semantic-selectable-border-width-s);transform:rotate(315deg)}.six-hours .tooltip-container{bottom:calc(100% + 0.6rem);left:0;right:0}.six-hours .tooltip-container .triangle{top:calc(100% - 0.6rem);right:calc(50% - 0.5rem);border-width:0 0 var(--lab-ds-semantic-selectable-border-width-s) var(--lab-ds-semantic-selectable-border-width-s);transform:rotate(315deg)}.seven-hours .tooltip-container{bottom:calc(100% + 0.6rem);left:0;right:0}.seven-hours .tooltip-container .triangle{top:calc(100% - 0.6rem);left:15%;border-width:0 0 var(--lab-ds-semantic-selectable-border-width-s) var(--lab-ds-semantic-selectable-border-width-s);transform:rotate(315deg)}.eleven-hours .tooltip-container{top:calc(100% + 0.6rem);left:0;right:0}.eleven-hours .tooltip-container .triangle{bottom:calc(100% - 0.6rem);left:15%;border-width:0 0 var(--lab-ds-semantic-selectable-border-width-s) var(--lab-ds-semantic-selectable-border-width-s);transform:rotate(135deg)}.twelve-hours .tooltip-container{top:calc(100% + 0.6rem);left:0;right:0}.twelve-hours .tooltip-container .triangle{bottom:calc(100% - 0.6rem);right:calc(50% - 0.5rem);border-width:0 0 var(--lab-ds-semantic-selectable-border-width-s) var(--lab-ds-semantic-selectable-border-width-s);transform:rotate(135deg)}";const o=class{constructor(t){e(this,t);this.label=undefined;this.tooltipPosition="five-hours"}render(){return t("div",{class:`v4-tooltip ${this.tooltipPosition}`},t("div",{class:"tooltip-trigger"},t("slot",null)),t("div",{class:"tooltip-container"},t("div",{class:"label"},this.label),t("div",{class:"triangle"})))}};o.style=r;export{o as lab_ds_tooltip};
//# sourceMappingURL=p-2b4718a8.entry.js.map