@sebgroup/green-core 3.29.0 → 3.31.0

package/components/tooltip/tooltip.component.js

@@ -0,0 +1,339 @@
+import {
+  __decorateClass,
+  __privateAdd,
+  __privateGet,
+  __privateMethod,
+  __privateSet
+} from "../../chunks/chunk.H2T4A5YY.js";
+var _trigger, _autoUpdateCleanup, _showTimeout, _hideTimeout, _triggerObserver, _resizeObserver, _suppressed, _GdsTooltip_instances, observeLineCount_fn, resolveTrigger_fn, connectTrigger_fn, disconnectTrigger_fn, observeTriggerReplacement_fn, triggerObservationRoot_fn, describedByAttr_fn, startPositioning_fn, stopPositioning_fn, updatePosition_fn, show_fn, hide_fn, dispatchUiStateEvent_fn, _handleTriggerPointerEnter, _handleTriggerPointerLeave, _handleTriggerPointerDown, _handleTriggerFocusIn, _handleTriggerFocusOut, _scheduleHide, _cancelHide, _handleDocumentKeydown;
+import { property, query, state } from "lit/decorators.js";
+import {
+  autoUpdate,
+  computePosition,
+  flip,
+  hide,
+  offset,
+  shift
+} from "@floating-ui/dom";
+import { GdsElement } from "../../gds-element.js";
+import { gdsCustomElement, html } from "../../scoping.js";
+import { tokens } from "../../tokens.style.js";
+import { watch } from "../../utils/decorators/index.js";
+import { randomId } from "../../utils/helpers/id.js";
+import TooltipStyles from "./tooltip.styles.js";
+const HIDE_DELAY = 100;
+const SKIP_DELAY_WINDOW = 300;
+const openTooltips = /* @__PURE__ */ new Set();
+let lastClosedAt = 0;
+let GdsTooltip = class extends GdsElement {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _GdsTooltip_instances);
+    this.open = false;
+    this.placement = "top";
+    this.delay = 300;
+    this._multiline = false;
+    __privateAdd(this, _trigger);
+    __privateAdd(this, _autoUpdateCleanup);
+    __privateAdd(this, _showTimeout);
+    __privateAdd(this, _hideTimeout);
+    __privateAdd(this, _triggerObserver);
+    __privateAdd(this, _resizeObserver);
+    // Set by pressing the trigger, so the tooltip stays out of the way until the pointer leaves.
+    __privateAdd(this, _suppressed, false);
+    __privateAdd(this, _handleTriggerPointerEnter, (e) => {
+      if (e.pointerType === "touch" || __privateGet(this, _suppressed)) return;
+      __privateGet(this, _cancelHide).call(this);
+      clearTimeout(__privateGet(this, _showTimeout));
+      const skipDelay = openTooltips.size > 0 || Date.now() - lastClosedAt < SKIP_DELAY_WINDOW;
+      if (skipDelay) __privateMethod(this, _GdsTooltip_instances, show_fn).call(this);
+      else __privateSet(this, _showTimeout, setTimeout(() => __privateMethod(this, _GdsTooltip_instances, show_fn).call(this), this.delay));
+    });
+    __privateAdd(this, _handleTriggerPointerLeave, () => {
+      __privateSet(this, _suppressed, false);
+      __privateGet(this, _scheduleHide).call(this);
+    });
+    __privateAdd(this, _handleTriggerPointerDown, () => {
+      __privateSet(this, _suppressed, true);
+      __privateMethod(this, _GdsTooltip_instances, hide_fn).call(this, "close");
+    });
+    __privateAdd(this, _handleTriggerFocusIn, (e) => {
+      if (__privateGet(this, _suppressed)) return;
+      const focused = e.composedPath()[0];
+      if (focused instanceof Element && !focused.matches(":focus-visible")) return;
+      __privateGet(this, _cancelHide).call(this);
+      __privateMethod(this, _GdsTooltip_instances, show_fn).call(this);
+    });
+    __privateAdd(this, _handleTriggerFocusOut, (e) => {
+      const next = e.relatedTarget;
+      if (next instanceof Node && __privateGet(this, _trigger)?.contains(next)) return;
+      __privateSet(this, _suppressed, false);
+      __privateMethod(this, _GdsTooltip_instances, hide_fn).call(this, "close");
+    });
+    __privateAdd(this, _scheduleHide, () => {
+      clearTimeout(__privateGet(this, _showTimeout));
+      clearTimeout(__privateGet(this, _hideTimeout));
+      __privateSet(this, _hideTimeout, setTimeout(() => __privateMethod(this, _GdsTooltip_instances, hide_fn).call(this, "close"), HIDE_DELAY));
+    });
+    __privateAdd(this, _cancelHide, () => {
+      clearTimeout(__privateGet(this, _hideTimeout));
+    });
+    __privateAdd(this, _handleDocumentKeydown, (e) => {
+      if (e.key === "Escape" && __privateMethod(this, _GdsTooltip_instances, hide_fn).call(this, "cancel")) {
+        e.preventDefault();
+      }
+    });
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "tooltip");
+    this.setAttribute("popover", "manual");
+    if (!this.id) this.id = randomId();
+    this.addEventListener("pointerenter", __privateGet(this, _cancelHide));
+    this.addEventListener("pointerleave", __privateGet(this, _scheduleHide));
+    this.updateComplete.then(() => {
+      __privateMethod(this, _GdsTooltip_instances, connectTrigger_fn).call(this);
+      __privateMethod(this, _GdsTooltip_instances, observeTriggerReplacement_fn).call(this);
+      __privateMethod(this, _GdsTooltip_instances, observeLineCount_fn).call(this);
+      this._handleOpenChange();
+    });
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("pointerenter", __privateGet(this, _cancelHide));
+    this.removeEventListener("pointerleave", __privateGet(this, _scheduleHide));
+    clearTimeout(__privateGet(this, _showTimeout));
+    clearTimeout(__privateGet(this, _hideTimeout));
+    __privateGet(this, _triggerObserver)?.disconnect();
+    __privateSet(this, _triggerObserver, void 0);
+    __privateGet(this, _resizeObserver)?.disconnect();
+    __privateSet(this, _resizeObserver, void 0);
+    __privateMethod(this, _GdsTooltip_instances, stopPositioning_fn).call(this);
+    __privateMethod(this, _GdsTooltip_instances, disconnectTrigger_fn).call(this);
+    document.removeEventListener("keydown", __privateGet(this, _handleDocumentKeydown));
+    openTooltips.delete(this);
+  }
+  render() {
+    const side = this._side ?? this.placement.split("-")[0];
+    return html`<div
+      class="container side-${side} ${this._multiline ? "multiline" : ""}"
+    >
+      <slot></slot>
+    </div>`;
+  }
+  _handleForChange() {
+    if (!this.isConnected) return;
+    this.updateComplete.then(() => __privateMethod(this, _GdsTooltip_instances, connectTrigger_fn).call(this));
+  }
+  _handleOpenChange() {
+    this.updateComplete.then(() => {
+      if (!this.isConnected) return;
+      const supportsPopover = typeof this.showPopover === "function";
+      const isShowing = supportsPopover && this.matches(":popover-open");
+      if (this.open) {
+        openTooltips.add(this);
+        if (supportsPopover && !isShowing) this.showPopover();
+        __privateMethod(this, _GdsTooltip_instances, startPositioning_fn).call(this);
+        document.addEventListener("keydown", __privateGet(this, _handleDocumentKeydown));
+      } else {
+        if (openTooltips.delete(this)) lastClosedAt = Date.now();
+        if (isShowing) this.hidePopover();
+        __privateMethod(this, _GdsTooltip_instances, stopPositioning_fn).call(this);
+        document.removeEventListener("keydown", __privateGet(this, _handleDocumentKeydown));
+      }
+    });
+  }
+  _handlePlacementChange() {
+    this._side = void 0;
+    if (!this.open) return;
+    this.updateComplete.then(() => __privateMethod(this, _GdsTooltip_instances, startPositioning_fn).call(this));
+  }
+};
+_trigger = new WeakMap();
+_autoUpdateCleanup = new WeakMap();
+_showTimeout = new WeakMap();
+_hideTimeout = new WeakMap();
+_triggerObserver = new WeakMap();
+_resizeObserver = new WeakMap();
+_suppressed = new WeakMap();
+_GdsTooltip_instances = new WeakSet();
+// The content box excludes padding, so the padding change cannot flip the result back.
+observeLineCount_fn = function() {
+  __privateGet(this, _resizeObserver)?.disconnect();
+  __privateSet(this, _resizeObserver, new ResizeObserver(([entry]) => {
+    const lineHeight = parseFloat(
+      getComputedStyle(this._elContainer).lineHeight
+    );
+    this._multiline = entry.contentRect.height > lineHeight * 1.5;
+  }));
+  __privateGet(this, _resizeObserver).observe(this._elContainer);
+};
+resolveTrigger_fn = function() {
+  if (!this.for) return void 0;
+  const root = this.getRootNode();
+  return root.getElementById?.(this.for) ?? this.ownerDocument.getElementById(this.for) ?? void 0;
+};
+connectTrigger_fn = function() {
+  const trigger = __privateMethod(this, _GdsTooltip_instances, resolveTrigger_fn).call(this);
+  if (trigger === __privateGet(this, _trigger)) return;
+  __privateMethod(this, _GdsTooltip_instances, disconnectTrigger_fn).call(this);
+  __privateSet(this, _trigger, trigger);
+  if (!trigger) return;
+  trigger.addEventListener("pointerenter", __privateGet(this, _handleTriggerPointerEnter));
+  trigger.addEventListener("pointerleave", __privateGet(this, _handleTriggerPointerLeave));
+  trigger.addEventListener("pointerdown", __privateGet(this, _handleTriggerPointerDown));
+  trigger.addEventListener("focusin", __privateGet(this, _handleTriggerFocusIn));
+  trigger.addEventListener("focusout", __privateGet(this, _handleTriggerFocusOut));
+  const attr = __privateMethod(this, _GdsTooltip_instances, describedByAttr_fn).call(this, trigger);
+  const ids = (trigger.getAttribute(attr) ?? "").split(/\s+/).filter(Boolean);
+  if (!ids.includes(this.id)) {
+    trigger.setAttribute(attr, [...ids, this.id].join(" "));
+  }
+  if (this.open) __privateMethod(this, _GdsTooltip_instances, startPositioning_fn).call(this);
+};
+disconnectTrigger_fn = function() {
+  const trigger = __privateGet(this, _trigger);
+  if (!trigger) return;
+  trigger.removeEventListener("pointerenter", __privateGet(this, _handleTriggerPointerEnter));
+  trigger.removeEventListener("pointerleave", __privateGet(this, _handleTriggerPointerLeave));
+  trigger.removeEventListener("pointerdown", __privateGet(this, _handleTriggerPointerDown));
+  trigger.removeEventListener("focusin", __privateGet(this, _handleTriggerFocusIn));
+  trigger.removeEventListener("focusout", __privateGet(this, _handleTriggerFocusOut));
+  const attr = __privateMethod(this, _GdsTooltip_instances, describedByAttr_fn).call(this, trigger);
+  const ids = (trigger.getAttribute(attr) ?? "").split(/\s+/).filter((id) => id && id !== this.id);
+  if (ids.length) trigger.setAttribute(attr, ids.join(" "));
+  else trigger.removeAttribute(attr);
+  __privateMethod(this, _GdsTooltip_instances, stopPositioning_fn).call(this);
+  __privateSet(this, _trigger, void 0);
+  __privateSet(this, _suppressed, false);
+};
+// Re-resolves the trigger when it is re-rendered, replaced, or its id changes.
+observeTriggerReplacement_fn = function() {
+  __privateGet(this, _triggerObserver)?.disconnect();
+  __privateSet(this, _triggerObserver, new MutationObserver(() => {
+    if (this.for) __privateMethod(this, _GdsTooltip_instances, connectTrigger_fn).call(this);
+  }));
+  __privateGet(this, _triggerObserver).observe(__privateMethod(this, _GdsTooltip_instances, triggerObservationRoot_fn).call(this), {
+    childList: true,
+    subtree: true,
+    attributes: true,
+    attributeFilter: ["id"]
+  });
+};
+// Narrows the observer to the nearest ancestor shared with the trigger, so a document-wide
+// mutation elsewhere doesn't re-run this tooltip's reconnect logic. Falls back to the tooltip's
+// own parent when the trigger hasn't resolved yet.
+triggerObservationRoot_fn = function() {
+  const trigger = __privateGet(this, _trigger) ?? __privateMethod(this, _GdsTooltip_instances, resolveTrigger_fn).call(this);
+  if (!trigger) return this.parentNode ?? this.getRootNode();
+  const ancestors = /* @__PURE__ */ new Set();
+  ancestors.add(this);
+  for (let n = this.parentNode; n; n = n.parentNode)
+    ancestors.add(n);
+  for (let n = trigger; n; n = n.parentNode) {
+    if (ancestors.has(n)) return n;
+  }
+  return this.getRootNode();
+};
+// GDS elements forward `gds-aria-*` to the element that carries their semantics.
+describedByAttr_fn = function(trigger) {
+  return trigger.nodeName.startsWith("GDS-") ? "gds-aria-describedby" : "aria-describedby";
+};
+startPositioning_fn = function() {
+  __privateMethod(this, _GdsTooltip_instances, stopPositioning_fn).call(this);
+  const trigger = __privateGet(this, _trigger);
+  if (!trigger || !this.open) return;
+  __privateSet(this, _autoUpdateCleanup, autoUpdate(
+    trigger,
+    this,
+    () => __privateMethod(this, _GdsTooltip_instances, updatePosition_fn).call(this, trigger)
+  ));
+};
+stopPositioning_fn = function() {
+  var _a;
+  (_a = __privateGet(this, _autoUpdateCleanup)) == null ? void 0 : _a.call(this);
+  __privateSet(this, _autoUpdateCleanup, void 0);
+};
+updatePosition_fn = async function(trigger) {
+  const { x, y, placement, middlewareData } = await computePosition(
+    trigger,
+    this,
+    {
+      placement: this.placement,
+      strategy: "fixed",
+      middleware: [offset(8), flip(), shift({ padding: 8 }), hide()]
+    }
+  );
+  this._side = placement.split("-")[0];
+  Object.assign(this.style, {
+    left: `${x}px`,
+    top: `${y}px`,
+    visibility: middlewareData.hide?.referenceHidden ? "hidden" : ""
+  });
+};
+show_fn = function() {
+  clearTimeout(__privateGet(this, _showTimeout));
+  if (this.open) return;
+  if (__privateMethod(this, _GdsTooltip_instances, dispatchUiStateEvent_fn).call(this, "show")) this.open = true;
+};
+hide_fn = function(reason) {
+  clearTimeout(__privateGet(this, _showTimeout));
+  clearTimeout(__privateGet(this, _hideTimeout));
+  if (!this.open) return false;
+  if (!__privateMethod(this, _GdsTooltip_instances, dispatchUiStateEvent_fn).call(this, reason)) return false;
+  this.open = false;
+  return true;
+};
+dispatchUiStateEvent_fn = function(reason) {
+  return this.dispatchCustomEvent("gds-ui-state", {
+    detail: { open: reason === "show", reason },
+    bubbles: false,
+    composed: false,
+    cancelable: true
+  });
+};
+_handleTriggerPointerEnter = new WeakMap();
+_handleTriggerPointerLeave = new WeakMap();
+_handleTriggerPointerDown = new WeakMap();
+_handleTriggerFocusIn = new WeakMap();
+_handleTriggerFocusOut = new WeakMap();
+_scheduleHide = new WeakMap();
+_cancelHide = new WeakMap();
+_handleDocumentKeydown = new WeakMap();
+GdsTooltip.styles = [tokens, TooltipStyles];
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], GdsTooltip.prototype, "open", 2);
+__decorateClass([
+  property({ attribute: "for" })
+], GdsTooltip.prototype, "for", 2);
+__decorateClass([
+  property()
+], GdsTooltip.prototype, "placement", 2);
+__decorateClass([
+  property({ type: Number })
+], GdsTooltip.prototype, "delay", 2);
+__decorateClass([
+  state()
+], GdsTooltip.prototype, "_side", 2);
+__decorateClass([
+  state()
+], GdsTooltip.prototype, "_multiline", 2);
+__decorateClass([
+  query(".container")
+], GdsTooltip.prototype, "_elContainer", 2);
+__decorateClass([
+  watch("for")
+], GdsTooltip.prototype, "_handleForChange", 1);
+__decorateClass([
+  watch("open")
+], GdsTooltip.prototype, "_handleOpenChange", 1);
+__decorateClass([
+  watch("placement")
+], GdsTooltip.prototype, "_handlePlacementChange", 1);
+GdsTooltip = __decorateClass([
+  gdsCustomElement("gds-tooltip")
+], GdsTooltip);
+export {
+  GdsTooltip
+};

package/components/tooltip/tooltip.d.ts

@@ -0,0 +1,2 @@
+import { GdsTooltip } from './tooltip.component';
+export { GdsTooltip };

package/components/tooltip/tooltip.js

@@ -0,0 +1,6 @@
+import "../../chunks/chunk.H2T4A5YY.js";
+import { GdsTooltip } from "./tooltip.component.js";
+GdsTooltip.define();
+export {
+  GdsTooltip
+};

package/components/tooltip/tooltip.styles.d.ts

@@ -0,0 +1,2 @@
+declare const style: import("lit").CSSResult;
+export default style;

package/components/tooltip/tooltip.styles.js

@@ -0,0 +1,120 @@
+import "../../chunks/chunk.H2T4A5YY.js";
+import { css } from "lit";
+const style = css`
+  @layer base {
+    :host {
+      --_max-width: 28ch;
+      --_padding-block: var(--gds-sys-space-2xs);
+      --_padding-inline: var(--gds-sys-space-s);
+      --_radius: var(--gds-sys-radius-max);
+      --_enter-duration: var(--gds-sys-motion-duration-fastest);
+      --_exit-duration: calc(var(--_enter-duration) / 2);
+      --_scale-from: 0.6;
+      /* Same zero-velocity curves as the indeterminate progress, so motion settles instead of stopping */
+      --_easing-lead: cubic-bezier(0.2, 0, 0.3, 1);
+      --_easing-trail: cubic-bezier(0.7, 0, 0.8, 1);
+
+      /* Reset the UA popover styles, the host is positioned by Floating UI */
+      position: fixed;
+      inset: auto;
+      margin: 0;
+      padding: 0;
+      border: 0;
+      background: transparent;
+      color: inherit;
+      overflow: visible;
+      width: max-content;
+      height: auto;
+      pointer-events: auto;
+      /* Keeps the host rendered, and in the top layer, until the exit transition has finished */
+      transition:
+        display var(--_exit-duration) allow-discrete,
+        overlay var(--_exit-duration) allow-discrete;
+    }
+
+    :host(:not([open])) {
+      display: none;
+    }
+
+    /* Without the Popover API there is no top layer to render in */
+    @supports not selector(:popover-open) {
+      :host {
+        z-index: 1060;
+      }
+    }
+
+    .container {
+      box-sizing: border-box;
+      /* The text width stays the same when the padding grows on wrapped text */
+      max-inline-size: min(
+        calc(var(--_max-width) + 2 * var(--_padding-inline)),
+        calc(100vw - var(--gds-sys-space-m))
+      );
+      padding: var(--_padding-block) var(--_padding-inline);
+      border-radius: var(--_radius);
+      background-color: var(--gds-sys-color-l3-neutral-03);
+      color: var(--gds-sys-color-content-neutral-03);
+      font: var(--gds-sys-text-detail-s-regular);
+      overflow-wrap: break-word;
+    }
+
+    .container.multiline {
+      --_padding-block: var(--gds-sys-space-s);
+      --_padding-inline: var(--gds-sys-space-s);
+      --_radius: var(--gds-sys-radius-s);
+    }
+
+    /* The bubble grows from the edge that faces the trigger */
+    .side-top {
+      transform-origin: 50% 100%;
+    }
+    .side-bottom {
+      transform-origin: 50% 0;
+    }
+    .side-left {
+      transform-origin: 100% 50%;
+    }
+    .side-right {
+      transform-origin: 0 50%;
+    }
+
+    :host([open]) .container {
+      scale: 1;
+      opacity: 1;
+      transition:
+        scale var(--_enter-duration) var(--_easing-lead),
+        opacity var(--_enter-duration) var(--_easing-lead);
+    }
+
+    :host(:not([open])) .container {
+      scale: var(--_scale-from);
+      opacity: 0;
+      transition:
+        scale var(--_exit-duration) var(--_easing-trail),
+        opacity var(--_exit-duration) var(--_easing-trail);
+    }
+
+    @starting-style {
+      :host([open]) .container {
+        scale: var(--_scale-from);
+        opacity: 0;
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      :host {
+        --_scale-from: 1;
+      }
+    }
+
+    @media (forced-colors: active) {
+      .container {
+        border: var(--gds-sys-space-5xs) solid CanvasText;
+      }
+    }
+  }
+`;
+var tooltip_styles_default = style;
+export {
+  tooltip_styles_default as default
+};