@getflip/swirl-components 0.1.0 → 0.2.0

package/dist/components/flip-tooltip.js

@@ -1,9 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { c as computePosition, o as offset, s as shift, f as flip } from './floating-ui.dom.esm.js';
 
-/*! NanoPop 2.1.0 MIT | https://github.com/Simonwep/nanopop */
-const e={variantFlipOrder:{start:"sme",middle:"mse",end:"ems"},positionFlipOrder:{top:"tbrl",right:"rltb",bottom:"btrl",left:"lrbt"},position:"bottom",margin:8},r=(t,r,o)=>{const{container:n,margin:i,position:p,variantFlipOrder:s,positionFlipOrder:l}={container:document.documentElement.getBoundingClientRect(),...e,...o},{left:c,top:f}=r.style;r.style.left="0",r.style.top="0";const m=t.getBoundingClientRect(),a=r.getBoundingClientRect(),b={t:m.top-a.height-i,b:m.bottom+i,r:m.right+i,l:m.left-a.width-i},d={vs:m.left,vm:m.left+m.width/2+-a.width/2,ve:m.left+m.width-a.width,hs:m.top,hm:m.bottom-m.height/2-a.height/2,he:m.bottom-a.height},[h,u="middle"]=p.split("-"),v=l[h],g=s[u],{top:O,left:F,bottom:x,right:j}=n;for(const t of v){const e="t"===t||"b"===t,o=b[t],[n,i]=e?["top","left"]:["left","top"],[p,s]=e?[a.height,a.width]:[a.width,a.height],[l,c]=e?[x,j]:[j,x],[f,m]=e?[O,F]:[F,O];if(!(o<f||o+p>l))for(const p of g){const l=d[(e?"v":"h")+p];if(!(l<m||l+s>c))return r.style[i]=l-a[i]+"px",r.style[n]=o-a[n]+"px",t+p}}return r.style.left=c,r.style.top=f,null};
-
-const flipTooltipCss = ":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)}";
+const flipTooltipCss = ":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);-webkit-animation:tooltip-fade-in 0.1s;animation:tooltip-fade-in 0.1s;backgrund-color:red}.tooltip__arrow{position:absolute;width:0.5rem;height:0.5rem;background-color:var(--s-surface-neutral-default)}@-webkit-keyframes tooltip-fade-in{from{opacity:0}to{opacity:1}}@keyframes tooltip-fade-in{from{opacity:0}to{opacity:1}}";
 
 const FlipTooltip$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -18,11 +16,11 @@ const FlipTooltip$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
         this.hide();
       }
     };
-    this.reposition = () => {
+    this.reposition = async () => {
       if (!Boolean(this.referenceEl) || !Boolean(this.popperEl)) {
         return;
       }
-      this.actualPosition = r(this.referenceEl, this.popperEl, this.options);
+      this.actualPosition = await computePosition(this.referenceEl, this.popperEl, this.options);
     };
     this.show = () => {
       this.visible = true;
@@ -51,33 +49,35 @@ const FlipTooltip$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
         .getPropertyValue("--s-space-12")
         .replace("rem", "") * 16;
       this.options = {
-        margin,
-        position: this.position,
+        middleware: [offset(margin), shift(), flip()],
+        placement: this.position,
+        strategy: "fixed",
       };
     };
     this.getArrowStyles = () => {
-      if (this.actualPosition === "tm") {
+      var _a, _b, _c, _d;
+      if (((_a = this.actualPosition) === null || _a === void 0 ? void 0 : _a.placement) === "top") {
         return {
           top: "100%",
           left: "50%",
           transform: "translate3d(-50%, -50%, 0) rotate(45deg)",
         };
       }
-      if (this.actualPosition === "bm") {
+      if (((_b = this.actualPosition) === null || _b === void 0 ? void 0 : _b.placement) === "bottom") {
         return {
           bottom: "100%",
           left: "50%",
           transform: "translate3d(-50%, 50%, 0) rotate(45deg)",
         };
       }
-      if (this.actualPosition === "rm") {
+      if (((_c = this.actualPosition) === null || _c === void 0 ? void 0 : _c.placement) === "right") {
         return {
           top: "50%",
           right: "100%",
           transform: "translate3d(50%, -50%, 0) rotate(45deg)",
         };
       }
-      if (this.actualPosition === "lm") {
+      if (((_d = this.actualPosition) === null || _d === void 0 ? void 0 : _d.placement) === "left") {
         return {
           top: "50%",
           left: "100%",
@@ -108,8 +108,16 @@ const FlipTooltip$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.updateOptions();
   }
   render() {
+    var _a, _b;
     const arrowStyles = this.getArrowStyles();
-    return (h(Host, { onKeydown: this.onKeydown }, h("span", { class: "tooltip" }, h("span", { class: "tooltip__reference", "aria-describedby": "tooltip", onBlur: this.hide, onClick: this.hide, onFocus: this.show, ref: (el) => (this.referenceEl = el), tabIndex: 0 }, h("slot", null)), h("span", { class: "tooltip__popper", ref: (el) => (this.popperEl = el) }, this.visible && (h("span", { class: "tooltip__bubble", id: "tooltip", role: "tooltip" }, h("span", { class: "tooltip__content", innerHTML: this.content }), h("span", { class: "tooltip__arrow", style: arrowStyles })))))));
+    return (h(Host, { onKeydown: this.onKeydown }, h("span", { class: "tooltip" }, h("span", { class: "tooltip__reference", "aria-describedby": "tooltip", onBlur: this.hide, onClick: this.hide, onFocus: this.show, ref: (el) => (this.referenceEl = el), tabIndex: 0 }, h("slot", null)), h("span", { class: "tooltip__popper", ref: (el) => (this.popperEl = el), style: {
+        top: Boolean(this.actualPosition)
+          ? `${(_a = this.actualPosition) === null || _a === void 0 ? void 0 : _a.y}px`
+          : "",
+        left: Boolean(this.actualPosition)
+          ? `${(_b = this.actualPosition) === null || _b === void 0 ? void 0 : _b.x}px`
+          : "",
+      } }, this.visible && (h("span", { class: "tooltip__bubble", id: "tooltip", role: "tooltip" }, h("span", { class: "tooltip__content", innerHTML: this.content }), h("span", { class: "tooltip__arrow", style: arrowStyles })))))));
   }
   static get watchers() { return {
     "position": ["watchPosition"]