v4web-components/dist/esm/lab-ds-tooltip.entry.js

Stencil Component Starter

import { r as registerInstance, h } from './index-0b720089.js';

const labDsTooltipCss = ".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 LabDsTooltip = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.label = undefined;
    this.tooltipPosition = 'five-hours';
  }
  render() {
    return (h("div", { class: `v4-tooltip ${this.tooltipPosition}` }, h("div", { class: "tooltip-trigger" }, h("slot", null)), h("div", { class: "tooltip-container" }, h("div", { class: "label" }, this.label), h("div", { class: "triangle" }))));
  }
};
LabDsTooltip.style = labDsTooltipCss;

export { LabDsTooltip as lab_ds_tooltip };

//# sourceMappingURL=lab-ds-tooltip.entry.js.map