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

Stencil Component Starter

import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';

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$1 = /*@__PURE__*/ proxyCustomElement(class LabDsTooltip extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.__attachShadow();
    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" }))));
  }
  static get style() { return labDsTooltipCss; }
}, [1, "lab-ds-tooltip", {
    "label": [1],
    "tooltipPosition": [1, "tooltip-position"]
  }]);
function defineCustomElement$1() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["lab-ds-tooltip"];
  components.forEach(tagName => { switch (tagName) {
    case "lab-ds-tooltip":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, LabDsTooltip$1);
      }
      break;
  } });
}

const LabDsTooltip = LabDsTooltip$1;
const defineCustomElement = defineCustomElement$1;

export { LabDsTooltip, defineCustomElement };

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