@getflip/swirl-components-react 0.1.0 → 0.1.1

package/dist/flip-tooltip.entry.8b5f35c7.js

@@ -1,102 +0,0 @@
-import { r as A, h as e, H as D } from "./main.7e7363a7.js";
-import "react";
-import "react-dom";
-/*! NanoPop 2.1.0 MIT | https://github.com/Simonwep/nanopop */
-const H = { variantFlipOrder: { start: "sme", middle: "mse", end: "ems" }, positionFlipOrder: { top: "tbrl", right: "rltb", bottom: "btrl", left: "lrbt" }, position: "bottom", margin: 8 }, K = (s, t, b) => {
-  const { container: w, margin: r, position: y, variantFlipOrder: v, positionFlipOrder: _ } = { container: document.documentElement.getBoundingClientRect(), ...H, ...b }, { left: x, top: T } = t.style;
-  t.style.left = "0", t.style.top = "0";
-  const o = s.getBoundingClientRect(), i = t.getBoundingClientRect(), E = { t: o.top - i.height - r, b: o.bottom + r, r: o.right + r, l: o.left - i.width - r }, B = { vs: o.left, vm: o.left + o.width / 2 + -i.width / 2, ve: o.left + o.width - i.width, hs: o.top, hm: o.bottom - o.height / 2 - i.height / 2, he: o.bottom - i.height }, [F, O = "middle"] = y.split("-"), P = _[F], C = v[O], { top: p, left: d, bottom: c, right: u } = w;
-  for (const l of P) {
-    const n = l === "t" || l === "b", a = E[l], [m, f] = n ? ["top", "left"] : ["left", "top"], [k, S] = n ? [i.height, i.width] : [i.width, i.height], [W, z] = n ? [c, u] : [u, c], [L, R] = n ? [p, d] : [d, p];
-    if (!(a < L || a + k > W))
-      for (const g of C) {
-        const h = B[(n ? "v" : "h") + g];
-        if (!(h < R || h + S > z))
-          return t.style[f] = h - i[f] + "px", t.style[m] = a - i[m] + "px", l + g;
-      }
-  }
-  return t.style.left = x, t.style.top = T, null;
-}, M = ":host{display:inline-flex}:host *{box-sizing:border-box}.tooltip{display:inline-flex}.tooltip .tooltip__reference{display:inline-flex}.tooltip__popper{position:fixed;z-index:var(--s-z-40);max-width:17.5rem}.tooltip__bubble{position:relative;display:block;padding-top:var(--s-space-8);padding-right:var(--s-space-12);padding-bottom:var(--s-space-8);padding-left:var(--s-space-12);border-radius:var(--s-border-radius-sm);color:var(--s-text-on-status);background-color:var(--s-surface-neutral-default);line-height:var(--s-line-height-base);backgrund-color:red}.tooltip__arrow{position:absolute;width:0.5rem;height:0.5rem;background-color:var(--s-surface-neutral-default)}", I = class {
-  constructor(s) {
-    A(this, s), this.delay = 300, this.position = "top", this.visible = !1, this.onKeydown = (t) => {
-      t.code === "Escape" && this.hide();
-    }, this.reposition = () => {
-      !Boolean(this.referenceEl) || !Boolean(this.popperEl) || (this.actualPosition = K(this.referenceEl, this.popperEl, this.options));
-    }, this.show = () => {
-      this.visible = !0, requestAnimationFrame(() => {
-        this.reposition();
-      });
-    }, this.showWithDelay = () => {
-      Boolean(this.showTimeout) && (clearTimeout(this.showTimeout), this.showTimeout = void 0), this.showTimeout = setTimeout(() => {
-        this.show();
-      }, this.delay);
-    }, this.hide = () => {
-      Boolean(this.showTimeout) && (clearTimeout(this.showTimeout), this.showTimeout = void 0), this.visible = !1;
-    }, this.updateOptions = () => {
-      const t = +getComputedStyle(document.documentElement).getPropertyValue("--s-space-12").replace("rem", "") * 16;
-      this.options = {
-        margin: t,
-        position: this.position
-      };
-    }, this.getArrowStyles = () => {
-      if (this.actualPosition === "tm")
-        return {
-          top: "100%",
-          left: "50%",
-          transform: "translate3d(-50%, -50%, 0) rotate(45deg)"
-        };
-      if (this.actualPosition === "bm")
-        return {
-          bottom: "100%",
-          left: "50%",
-          transform: "translate3d(-50%, 50%, 0) rotate(45deg)"
-        };
-      if (this.actualPosition === "rm")
-        return {
-          top: "50%",
-          right: "100%",
-          transform: "translate3d(50%, -50%, 0) rotate(45deg)"
-        };
-      if (this.actualPosition === "lm")
-        return {
-          top: "50%",
-          left: "100%",
-          transform: "translate3d(-50%, -50%, 0) rotate(45deg)"
-        };
-    };
-  }
-  watchPosition() {
-    this.updateOptions();
-  }
-  onMouseEnter() {
-    this.showWithDelay();
-  }
-  onMouseLeave() {
-    this.hide();
-  }
-  onWindowResize() {
-    this.reposition();
-  }
-  onWindowScroll() {
-    this.reposition();
-  }
-  componentWillLoad() {
-    this.reposition();
-  }
-  componentDidLoad() {
-    this.updateOptions();
-  }
-  render() {
-    const s = this.getArrowStyles();
-    return e(D, { onKeydown: this.onKeydown }, e("span", { class: "tooltip" }, e("span", { class: "tooltip__reference", "aria-describedby": "tooltip", onBlur: this.hide, onClick: this.hide, onFocus: this.show, ref: (t) => this.referenceEl = t, tabIndex: 0 }, e("slot", null)), e("span", { class: "tooltip__popper", ref: (t) => this.popperEl = t }, this.visible && e("span", { class: "tooltip__bubble", id: "tooltip", role: "tooltip" }, e("span", { class: "tooltip__content", innerHTML: this.content }), e("span", { class: "tooltip__arrow", style: s })))));
-  }
-  static get watchers() {
-    return {
-      position: ["watchPosition"]
-    };
-  }
-};
-I.style = M;
-export {
-  I as flip_tooltip
-};