@paperless/core 0.1.0-alpha.420 → 0.1.0-alpha.422

package/dist/components/tooltip.component.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { c as createPopper } from './popper.js';
+import { a as autoUpdate, c as computePosition, o as offset, f as flip, s as shift, b as arrow } from './floating-ui.dom.esm.js';
 
-const tooltipComponentCss = ".visible{visibility:visible!important}.static{position:static!important}.fixed{position:fixed!important}.absolute{position:absolute!important}.relative{position:relative!important}.bottom-0{bottom:0!important}.left-0{left:0!important}.z-tooltip{z-index:601!important}.col-start-1{grid-column-start:1!important}.col-start-2{grid-column-start:2!important}.col-start-3{grid-column-start:3!important}.col-start-4{grid-column-start:4!important}.col-start-5{grid-column-start:5!important}.col-start-6{grid-column-start:6!important}.col-start-7{grid-column-start:7!important}.m-0{margin:0!important}.mb-14{margin-bottom:3.5rem!important}.mb-6{margin-bottom:1.5rem!important}.ml-1{margin-left:.25rem!important}.ml-2{margin-left:.5rem!important}.block{display:block!important}.inline{display:inline!important}.flex{display:flex!important}.table{display:table!important}.table-cell{display:table-cell!important}.table-row{display:table-row!important}.hidden{display:none!important}.h-0{height:0!important}.h-2{height:.5rem!important}.h-6{height:1.5rem!important}.h-8{height:2rem!important}.w-1{width:.25rem!important}.w-10{width:2.5rem!important}.w-11{width:2.75rem!important}.w-2{width:.5rem!important}.w-3{width:.75rem!important}.w-4{width:1rem!important}.w-5{width:1.25rem!important}.w-6{width:1.5rem!important}.w-7{width:1.75rem!important}.w-8{width:2rem!important}.w-9{width:2.25rem!important}.w-auto{width:auto!important}.w-full{width:100%!important}.min-w-0{min-width:0!important}.flex-1{flex:1 1 0%!important}.-rotate-0{--tw-rotate:-0deg!important}.-rotate-0,.-rotate-135{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-135{--tw-rotate:-135deg!important}.-rotate-180{--tw-rotate:-180deg!important}.-rotate-180,.-rotate-225{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-225{--tw-rotate:-225deg!important}.-rotate-25{--tw-rotate:-25deg!important}.-rotate-25,.-rotate-270{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-270{--tw-rotate:-270deg!important}.-rotate-315{--tw-rotate:-315deg!important}.-rotate-315,.-rotate-45{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-45{--tw-rotate:-45deg!important}.-rotate-90{--tw-rotate:-90deg!important}.-rotate-90,.rotate-0{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-0{--tw-rotate:0deg!important}.rotate-135{--tw-rotate:135deg!important}.rotate-135,.rotate-180{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-180{--tw-rotate:180deg!important}.rotate-225{--tw-rotate:225deg!important}.rotate-225,.rotate-25{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-25{--tw-rotate:25deg!important}.rotate-270{--tw-rotate:270deg!important}.rotate-270,.rotate-315{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-315{--tw-rotate:315deg!important}.rotate-45{--tw-rotate:45deg!important}.rotate-45,.rotate-90{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-90{--tw-rotate:90deg!important}.scale-x-flip{--tw-scale-x:-1!important}.scale-x-flip,.scale-y-flip{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.scale-y-flip{--tw-scale-y:-1!important}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.cursor-pointer{cursor:pointer!important}.flex-col{flex-direction:column!important}.items-start{align-items:flex-start!important}.items-end{align-items:flex-end!important}.items-center{align-items:center!important}.justify-start{justify-content:flex-start!important}.justify-end{justify-content:flex-end!important}.justify-center{justify-content:center!important}.justify-between{justify-content:space-between!important}.gap-2{gap:.5rem!important}.gap-4{gap:1rem!important}.self-center{align-self:center!important}.overflow-hidden{overflow:hidden!important}.text-ellipsis{text-overflow:ellipsis!important}.whitespace-nowrap{white-space:nowrap!important}.rounded{border-radius:.25rem!important}.rounded-large{border-radius:.375rem!important}.rounded-bl-none{border-bottom-left-radius:0!important}.rounded-br-none{border-bottom-right-radius:0!important}.rounded-tl-none{border-top-left-radius:0!important}.rounded-tr-none{border-top-right-radius:0!important}.border{border-width:1px!important}.border-l-0{border-left-width:0!important}.border-r-0{border-right-width:0!important}.border-solid{border-style:solid!important}.border-transparent{border-color:transparent!important}.border-t-mystic-dark{--tw-border-opacity:1!important;border-top-color:rgb(218 230 240/var(--tw-border-opacity))!important}.bg-mystic{background-color:rgb(247 250 252/var(--tw-bg-opacity))!important}.bg-mystic,.bg-negative{--tw-bg-opacity:1!important}.bg-negative{background-color:rgb(185 30 40/var(--tw-bg-opacity))!important}.bg-storm{background-color:rgb(81 83 107/var(--tw-bg-opacity))!important}.bg-storm,.bg-white{--tw-bg-opacity:1!important}.bg-white{background-color:rgb(255 255 255/var(--tw-bg-opacity))!important}.p-4{padding:1rem!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.px-3{padding-left:.75rem!important;padding-right:.75rem!important}.py-1{padding-bottom:.25rem!important;padding-top:.25rem!important}.py-2{padding-bottom:.5rem!important;padding-top:.5rem!important}.py-24{padding-bottom:6rem!important;padding-top:6rem!important}.pl-0{padding-left:0!important}.pr-0{padding-right:0!important}.text-center{text-align:center!important}.text-2xl{font-size:1.5rem!important;line-height:2rem!important}.text-3xl{font-size:1.875rem!important;line-height:2.25rem!important}.text-4xl{font-size:2.25rem!important;line-height:2.5rem!important}.text-5xl{font-size:3rem!important}.text-5xl,.text-6xl{line-height:1!important}.text-6xl{font-size:3.75rem!important}.text-base{font-size:1rem!important;line-height:1.5rem!important}.text-lg{font-size:1.125rem!important;line-height:1.75rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.text-xl{font-size:1.25rem!important;line-height:1.75rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.text-xxs{font-size:.6875rem!important}.font-medium{font-weight:500!important}.font-semibold{font-weight:600!important}.uppercase{text-transform:uppercase!important}.text-negative{color:rgb(185 30 40/var(--tw-text-opacity))!important}.text-negative,.text-negative-light{--tw-text-opacity:1!important}.text-negative-light{color:rgb(255 204 211/var(--tw-text-opacity))!important}.text-storm-dark{color:rgb(39 40 56/var(--tw-text-opacity))!important}.text-storm-dark,.text-storm-medium{--tw-text-opacity:1!important}.text-storm-medium{color:rgb(128 130 158/var(--tw-text-opacity))!important}.blur{--tw-blur:blur(8px)!important}.blur,.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}*{box-sizing:border-box}.rotate-45,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.bg-negative,.bg-storm{--tw-bg-opacity:1!important}:host{cursor:pointer;display:flex}:host .popover-container{height:0;position:relative;width:0}:host .popover-container .popover{--tw-bg-opacity:1;--tw-drop-shadow:drop-shadow(0px 0.3125rem 1rem rgba(0,24,98,.08)) drop-shadow(0px 0.0625rem 0.1875rem rgba(0,24,98,.13));background-color:rgb(255 255 255/var(--tw-bg-opacity));border-radius:.25rem;display:none;filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);font-size:.75rem;font-weight:500;line-height:1rem;max-width:14.5rem;padding:.5rem .75rem;z-index:601}:host .popover-container .popover.variant-error,:host .popover-container .popover.variant-hover{--tw-bg-opacity:1;--tw-text-opacity:1;background-color:rgb(81 83 107/var(--tw-bg-opacity));color:rgb(255 255 255/var(--tw-text-opacity));padding-bottom:.25rem;padding-top:.25rem}:host .popover-container .popover.variant-error{--tw-bg-opacity:1;background-color:rgb(185 30 40/var(--tw-bg-opacity));letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}:host .popover-container .popover[data-show]{display:inline-block}:host .popover-container .popover .arrow,:host .popover-container .popover .arrow:before{background:inherit;height:.5rem;position:absolute;width:.5rem}:host .popover-container .popover .arrow{visibility:hidden}:host .popover-container .popover .arrow:before{--tw-rotate:45deg;content:\"\";transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));visibility:visible}:host .popover-container .popover[data-popper-placement^=top]>.arrow{bottom:-.25rem}:host .popover-container .popover[data-popper-placement^=bottom]>.arrow{top:-.25rem}:host .popover-container .popover[data-popper-placement^=left]>.arrow{right:-.25rem}:host .popover-container .popover[data-popper-placement^=right]>.arrow{left:-.25rem}.-rotate-0,.-rotate-135,.-rotate-180,.-rotate-225,.-rotate-25,.-rotate-270,.-rotate-315,.-rotate-45,.-rotate-90,.rotate-0,.rotate-135,.rotate-180,.rotate-225,.rotate-25,.rotate-270,.rotate-315,.rotate-45,.rotate-90,.scale-x-flip,.scale-y-flip{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.hover\\:text-negative:hover{--tw-text-opacity:1!important;color:rgb(185 30 40/var(--tw-text-opacity))!important}.max-w-\\[20rem\\]{max-width:20rem!important}.w-1\\/12{width:8.333333%!important}.w-10\\/12{width:83.333333%!important}.w-11\\/12{width:91.666667%!important}.w-2\\/12{width:16.666667%!important}.w-3\\/12{width:25%!important}.w-4\\/12{width:33.333333%!important}.w-5\\/12{width:41.666667%!important}.w-6\\/12{width:50%!important}.w-7\\/12{width:58.333333%!important}.w-8\\/12{width:66.666667%!important}.w-9\\/12{width:75%!important}@media (min-width:40rem){.tablet\\:w-1\\/12{width:8.333333%!important}.tablet\\:w-10\\/12{width:83.333333%!important}.tablet\\:w-11\\/12{width:91.666667%!important}.tablet\\:w-2\\/12{width:16.666667%!important}.tablet\\:w-3\\/12{width:25%!important}.tablet\\:w-4\\/12{width:33.333333%!important}.tablet\\:w-5\\/12{width:41.666667%!important}.tablet\\:w-6\\/12{width:50%!important}.tablet\\:w-7\\/12{width:58.333333%!important}.tablet\\:w-8\\/12{width:66.666667%!important}.tablet\\:w-9\\/12{width:75%!important}}@media (min-width:64rem){.desktop-xs\\:w-1\\/12{width:8.333333%!important}.desktop-xs\\:w-10\\/12{width:83.333333%!important}.desktop-xs\\:w-11\\/12{width:91.666667%!important}.desktop-xs\\:w-2\\/12{width:16.666667%!important}.desktop-xs\\:w-3\\/12{width:25%!important}.desktop-xs\\:w-4\\/12{width:33.333333%!important}.desktop-xs\\:w-5\\/12{width:41.666667%!important}.desktop-xs\\:w-6\\/12{width:50%!important}.desktop-xs\\:w-7\\/12{width:58.333333%!important}.desktop-xs\\:w-8\\/12{width:66.666667%!important}.desktop-xs\\:w-9\\/12{width:75%!important}}@media (min-width:80rem){.desktop-sm\\:w-1\\/12{width:8.333333%!important}.desktop-sm\\:w-10\\/12{width:83.333333%!important}.desktop-sm\\:w-11\\/12{width:91.666667%!important}.desktop-sm\\:w-2\\/12{width:16.666667%!important}.desktop-sm\\:w-3\\/12{width:25%!important}.desktop-sm\\:w-4\\/12{width:33.333333%!important}.desktop-sm\\:w-5\\/12{width:41.666667%!important}.desktop-sm\\:w-6\\/12{width:50%!important}.desktop-sm\\:w-7\\/12{width:58.333333%!important}.desktop-sm\\:w-8\\/12{width:66.666667%!important}.desktop-sm\\:w-9\\/12{width:75%!important}}@media (min-width:85.375rem){.desktop\\:w-1\\/12{width:8.333333%!important}.desktop\\:w-10\\/12{width:83.333333%!important}.desktop\\:w-11\\/12{width:91.666667%!important}.desktop\\:w-2\\/12{width:16.666667%!important}.desktop\\:w-3\\/12{width:25%!important}.desktop\\:w-4\\/12{width:33.333333%!important}.desktop\\:w-5\\/12{width:41.666667%!important}.desktop\\:w-6\\/12{width:50%!important}.desktop\\:w-7\\/12{width:58.333333%!important}.desktop\\:w-8\\/12{width:66.666667%!important}.desktop\\:w-9\\/12{width:75%!important}}@media (min-width:90rem){.desktop-lg\\:w-1\\/12{width:8.333333%!important}.desktop-lg\\:w-10\\/12{width:83.333333%!important}.desktop-lg\\:w-11\\/12{width:91.666667%!important}.desktop-lg\\:w-2\\/12{width:16.666667%!important}.desktop-lg\\:w-3\\/12{width:25%!important}.desktop-lg\\:w-4\\/12{width:33.333333%!important}.desktop-lg\\:w-5\\/12{width:41.666667%!important}.desktop-lg\\:w-6\\/12{width:50%!important}.desktop-lg\\:w-7\\/12{width:58.333333%!important}.desktop-lg\\:w-8\\/12{width:66.666667%!important}.desktop-lg\\:w-9\\/12{width:75%!important}}@media (min-width:120rem){.desktop-xl\\:w-1\\/12{width:8.333333%!important}.desktop-xl\\:w-10\\/12{width:83.333333%!important}.desktop-xl\\:w-11\\/12{width:91.666667%!important}.desktop-xl\\:w-2\\/12{width:16.666667%!important}.desktop-xl\\:w-3\\/12{width:25%!important}.desktop-xl\\:w-4\\/12{width:33.333333%!important}.desktop-xl\\:w-5\\/12{width:41.666667%!important}.desktop-xl\\:w-6\\/12{width:50%!important}.desktop-xl\\:w-7\\/12{width:58.333333%!important}.desktop-xl\\:w-8\\/12{width:66.666667%!important}.desktop-xl\\:w-9\\/12{width:75%!important}}@media (min-width:64rem){.desktop-xs\\:flex{display:flex!important}}.w-3\\/4{width:75%!important}@media (min-width:64rem){.desktop-xs\\:hidden{display:none!important}.desktop-xs\\:w-48{width:12rem!important}.desktop-xs\\:w-auto{width:auto!important}.desktop-xs\\:flex-row{flex-direction:row!important}}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}";
+const tooltipComponentCss = ".visible{visibility:visible!important}.static{position:static!important}.fixed{position:fixed!important}.absolute{position:absolute!important}.relative{position:relative!important}.bottom-0{bottom:0!important}.left-0{left:0!important}.top-0{top:0!important}.z-tooltip{z-index:601!important}.col-start-1{grid-column-start:1!important}.col-start-2{grid-column-start:2!important}.col-start-3{grid-column-start:3!important}.col-start-4{grid-column-start:4!important}.col-start-5{grid-column-start:5!important}.col-start-6{grid-column-start:6!important}.col-start-7{grid-column-start:7!important}.m-0{margin:0!important}.mb-14{margin-bottom:3.5rem!important}.mb-6{margin-bottom:1.5rem!important}.ml-1{margin-left:.25rem!important}.ml-2{margin-left:.5rem!important}.block{display:block!important}.inline-block{display:inline-block!important}.inline{display:inline!important}.flex{display:flex!important}.table{display:table!important}.table-cell{display:table-cell!important}.table-row{display:table-row!important}.hidden{display:none!important}.h-0{height:0!important}.h-2{height:.5rem!important}.h-6{height:1.5rem!important}.h-8{height:2rem!important}.w-1{width:.25rem!important}.w-10{width:2.5rem!important}.w-11{width:2.75rem!important}.w-2{width:.5rem!important}.w-3{width:.75rem!important}.w-4{width:1rem!important}.w-5{width:1.25rem!important}.w-6{width:1.5rem!important}.w-7{width:1.75rem!important}.w-8{width:2rem!important}.w-9{width:2.25rem!important}.w-auto{width:auto!important}.w-full{width:100%!important}.min-w-0{min-width:0!important}.flex-1{flex:1 1 0%!important}.-rotate-0{--tw-rotate:-0deg!important}.-rotate-0,.-rotate-135{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-135{--tw-rotate:-135deg!important}.-rotate-180{--tw-rotate:-180deg!important}.-rotate-180,.-rotate-225{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-225{--tw-rotate:-225deg!important}.-rotate-25{--tw-rotate:-25deg!important}.-rotate-25,.-rotate-270{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-270{--tw-rotate:-270deg!important}.-rotate-315{--tw-rotate:-315deg!important}.-rotate-315,.-rotate-45{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-45{--tw-rotate:-45deg!important}.-rotate-90{--tw-rotate:-90deg!important}.-rotate-90,.rotate-0{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-0{--tw-rotate:0deg!important}.rotate-135{--tw-rotate:135deg!important}.rotate-135,.rotate-180{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-180{--tw-rotate:180deg!important}.rotate-225{--tw-rotate:225deg!important}.rotate-225,.rotate-25{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-25{--tw-rotate:25deg!important}.rotate-270{--tw-rotate:270deg!important}.rotate-270,.rotate-315{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-315{--tw-rotate:315deg!important}.rotate-45{--tw-rotate:45deg!important}.rotate-45,.rotate-90{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-90{--tw-rotate:90deg!important}.scale-x-flip{--tw-scale-x:-1!important}.scale-x-flip,.scale-y-flip{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.scale-y-flip{--tw-scale-y:-1!important}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.cursor-pointer{cursor:pointer!important}.flex-col{flex-direction:column!important}.items-start{align-items:flex-start!important}.items-end{align-items:flex-end!important}.items-center{align-items:center!important}.justify-start{justify-content:flex-start!important}.justify-end{justify-content:flex-end!important}.justify-center{justify-content:center!important}.justify-between{justify-content:space-between!important}.gap-2{gap:.5rem!important}.gap-4{gap:1rem!important}.self-center{align-self:center!important}.overflow-hidden{overflow:hidden!important}.text-ellipsis{text-overflow:ellipsis!important}.whitespace-nowrap{white-space:nowrap!important}.rounded{border-radius:.25rem!important}.rounded-large{border-radius:.375rem!important}.rounded-bl-none{border-bottom-left-radius:0!important}.rounded-br-none{border-bottom-right-radius:0!important}.rounded-tl-none{border-top-left-radius:0!important}.rounded-tr-none{border-top-right-radius:0!important}.border{border-width:1px!important}.border-l-0{border-left-width:0!important}.border-r-0{border-right-width:0!important}.border-solid{border-style:solid!important}.border-transparent{border-color:transparent!important}.border-t-mystic-dark{--tw-border-opacity:1!important;border-top-color:rgb(218 230 240/var(--tw-border-opacity))!important}.bg-mystic{background-color:rgb(247 250 252/var(--tw-bg-opacity))!important}.bg-mystic,.bg-negative{--tw-bg-opacity:1!important}.bg-negative{background-color:rgb(185 30 40/var(--tw-bg-opacity))!important}.bg-storm{background-color:rgb(81 83 107/var(--tw-bg-opacity))!important}.bg-storm,.bg-white{--tw-bg-opacity:1!important}.bg-white{background-color:rgb(255 255 255/var(--tw-bg-opacity))!important}.p-4{padding:1rem!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.px-3{padding-left:.75rem!important;padding-right:.75rem!important}.py-1{padding-bottom:.25rem!important;padding-top:.25rem!important}.py-2{padding-bottom:.5rem!important;padding-top:.5rem!important}.py-24{padding-bottom:6rem!important;padding-top:6rem!important}.pl-0{padding-left:0!important}.pr-0{padding-right:0!important}.text-center{text-align:center!important}.text-2xl{font-size:1.5rem!important;line-height:2rem!important}.text-3xl{font-size:1.875rem!important;line-height:2.25rem!important}.text-4xl{font-size:2.25rem!important;line-height:2.5rem!important}.text-5xl{font-size:3rem!important}.text-5xl,.text-6xl{line-height:1!important}.text-6xl{font-size:3.75rem!important}.text-base{font-size:1rem!important;line-height:1.5rem!important}.text-lg{font-size:1.125rem!important;line-height:1.75rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.text-xl{font-size:1.25rem!important;line-height:1.75rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.text-xxs{font-size:.6875rem!important}.font-medium{font-weight:500!important}.font-semibold{font-weight:600!important}.uppercase{text-transform:uppercase!important}.text-negative{color:rgb(185 30 40/var(--tw-text-opacity))!important}.text-negative,.text-negative-light{--tw-text-opacity:1!important}.text-negative-light{color:rgb(255 204 211/var(--tw-text-opacity))!important}.text-storm-dark{color:rgb(39 40 56/var(--tw-text-opacity))!important}.text-storm-dark,.text-storm-medium{--tw-text-opacity:1!important}.text-storm-medium{color:rgb(128 130 158/var(--tw-text-opacity))!important}.opacity-0{opacity:0!important}.blur{--tw-blur:blur(8px)!important}.blur,.drop-shadow-4{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}.drop-shadow-4{--tw-drop-shadow:drop-shadow(0px 0.3125rem 1rem rgba(0,24,98,.08)) drop-shadow(0px 0.0625rem 0.1875rem rgba(0,24,98,.13))!important}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}*{box-sizing:border-box}.rotate-45,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.bg-negative,.bg-storm{--tw-bg-opacity:1!important}:host{cursor:pointer;display:flex}:host .popover-container{height:0;position:relative;width:0}:host .popover-container .popover{--tw-bg-opacity:1;--tw-drop-shadow:drop-shadow(0px 0.3125rem 1rem rgba(0,24,98,.08)) drop-shadow(0px 0.0625rem 0.1875rem rgba(0,24,98,.13));background-color:rgb(255 255 255/var(--tw-bg-opacity));border-radius:.25rem;display:inline-block;filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);font-size:.75rem;font-weight:500;left:0;line-height:1rem;max-width:14.5rem;opacity:0;padding:.5rem .75rem;top:0;transition-duration:.15s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);width:-moz-max-content;width:max-content;z-index:601}:host .popover-container .popover.variant-error,:host .popover-container .popover.variant-hover{--tw-bg-opacity:1;--tw-text-opacity:1;background-color:rgb(81 83 107/var(--tw-bg-opacity));color:rgb(255 255 255/var(--tw-text-opacity));padding-bottom:.25rem;padding-top:.25rem}:host .popover-container .popover.variant-error{--tw-bg-opacity:1;background-color:rgb(185 30 40/var(--tw-bg-opacity));letter-spacing:.05em;text-transform:uppercase}:host .popover-container .popover[data-show]{opacity:1}:host .popover-container .popover .arrow,:host .popover-container .popover .arrow:before{background:inherit;height:.5rem;position:absolute;width:.5rem}:host .popover-container .popover .arrow{visibility:hidden}:host .popover-container .popover .arrow:before{--tw-rotate:45deg;content:\"\";transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));visibility:visible}:host .popover-container .popover[data-strategy=fixed]{position:fixed}:host .popover-container .popover[data-strategy=absolute]{position:absolute}:host .popover-container .popover[data-placement^=top]>.arrow{bottom:-.25rem}:host .popover-container .popover[data-placement^=bottom]>.arrow{top:-.25rem}:host .popover-container .popover[data-placement^=left]>.arrow{right:-.25rem}:host .popover-container .popover[data-placement^=right]>.arrow{left:-.25rem}.-rotate-0,.-rotate-135,.-rotate-180,.-rotate-225,.-rotate-25,.-rotate-270,.-rotate-315,.-rotate-45,.-rotate-90,.rotate-0,.rotate-135,.rotate-180,.rotate-225,.rotate-25,.rotate-270,.rotate-315,.rotate-45,.rotate-90,.scale-x-flip,.scale-y-flip{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.hover\\:text-negative:hover{--tw-text-opacity:1!important;color:rgb(185 30 40/var(--tw-text-opacity))!important}.blur,.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}.max-w-\\[20rem\\]{max-width:20rem!important}.w-1\\/12{width:8.333333%!important}.w-10\\/12{width:83.333333%!important}.w-11\\/12{width:91.666667%!important}.w-2\\/12{width:16.666667%!important}.w-3\\/12{width:25%!important}.w-4\\/12{width:33.333333%!important}.w-5\\/12{width:41.666667%!important}.w-6\\/12{width:50%!important}.w-7\\/12{width:58.333333%!important}.w-8\\/12{width:66.666667%!important}.w-9\\/12{width:75%!important}@media (min-width:40rem){.tablet\\:w-1\\/12{width:8.333333%!important}.tablet\\:w-10\\/12{width:83.333333%!important}.tablet\\:w-11\\/12{width:91.666667%!important}.tablet\\:w-2\\/12{width:16.666667%!important}.tablet\\:w-3\\/12{width:25%!important}.tablet\\:w-4\\/12{width:33.333333%!important}.tablet\\:w-5\\/12{width:41.666667%!important}.tablet\\:w-6\\/12{width:50%!important}.tablet\\:w-7\\/12{width:58.333333%!important}.tablet\\:w-8\\/12{width:66.666667%!important}.tablet\\:w-9\\/12{width:75%!important}}@media (min-width:64rem){.desktop-xs\\:w-1\\/12{width:8.333333%!important}.desktop-xs\\:w-10\\/12{width:83.333333%!important}.desktop-xs\\:w-11\\/12{width:91.666667%!important}.desktop-xs\\:w-2\\/12{width:16.666667%!important}.desktop-xs\\:w-3\\/12{width:25%!important}.desktop-xs\\:w-4\\/12{width:33.333333%!important}.desktop-xs\\:w-5\\/12{width:41.666667%!important}.desktop-xs\\:w-6\\/12{width:50%!important}.desktop-xs\\:w-7\\/12{width:58.333333%!important}.desktop-xs\\:w-8\\/12{width:66.666667%!important}.desktop-xs\\:w-9\\/12{width:75%!important}}@media (min-width:80rem){.desktop-sm\\:w-1\\/12{width:8.333333%!important}.desktop-sm\\:w-10\\/12{width:83.333333%!important}.desktop-sm\\:w-11\\/12{width:91.666667%!important}.desktop-sm\\:w-2\\/12{width:16.666667%!important}.desktop-sm\\:w-3\\/12{width:25%!important}.desktop-sm\\:w-4\\/12{width:33.333333%!important}.desktop-sm\\:w-5\\/12{width:41.666667%!important}.desktop-sm\\:w-6\\/12{width:50%!important}.desktop-sm\\:w-7\\/12{width:58.333333%!important}.desktop-sm\\:w-8\\/12{width:66.666667%!important}.desktop-sm\\:w-9\\/12{width:75%!important}}@media (min-width:85.375rem){.desktop\\:w-1\\/12{width:8.333333%!important}.desktop\\:w-10\\/12{width:83.333333%!important}.desktop\\:w-11\\/12{width:91.666667%!important}.desktop\\:w-2\\/12{width:16.666667%!important}.desktop\\:w-3\\/12{width:25%!important}.desktop\\:w-4\\/12{width:33.333333%!important}.desktop\\:w-5\\/12{width:41.666667%!important}.desktop\\:w-6\\/12{width:50%!important}.desktop\\:w-7\\/12{width:58.333333%!important}.desktop\\:w-8\\/12{width:66.666667%!important}.desktop\\:w-9\\/12{width:75%!important}}@media (min-width:90rem){.desktop-lg\\:w-1\\/12{width:8.333333%!important}.desktop-lg\\:w-10\\/12{width:83.333333%!important}.desktop-lg\\:w-11\\/12{width:91.666667%!important}.desktop-lg\\:w-2\\/12{width:16.666667%!important}.desktop-lg\\:w-3\\/12{width:25%!important}.desktop-lg\\:w-4\\/12{width:33.333333%!important}.desktop-lg\\:w-5\\/12{width:41.666667%!important}.desktop-lg\\:w-6\\/12{width:50%!important}.desktop-lg\\:w-7\\/12{width:58.333333%!important}.desktop-lg\\:w-8\\/12{width:66.666667%!important}.desktop-lg\\:w-9\\/12{width:75%!important}}@media (min-width:120rem){.desktop-xl\\:w-1\\/12{width:8.333333%!important}.desktop-xl\\:w-10\\/12{width:83.333333%!important}.desktop-xl\\:w-11\\/12{width:91.666667%!important}.desktop-xl\\:w-2\\/12{width:16.666667%!important}.desktop-xl\\:w-3\\/12{width:25%!important}.desktop-xl\\:w-4\\/12{width:33.333333%!important}.desktop-xl\\:w-5\\/12{width:41.666667%!important}.desktop-xl\\:w-6\\/12{width:50%!important}.desktop-xl\\:w-7\\/12{width:58.333333%!important}.desktop-xl\\:w-8\\/12{width:66.666667%!important}.desktop-xl\\:w-9\\/12{width:75%!important}}@media (min-width:64rem){.desktop-xs\\:flex{display:flex!important}}.w-3\\/4{width:75%!important}@media (min-width:64rem){.desktop-xs\\:hidden{display:none!important}.desktop-xs\\:w-48{width:12rem!important}.desktop-xs\\:w-auto{width:auto!important}.desktop-xs\\:flex-row{flex-direction:row!important}}";
 
 const Tooltip = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -13,15 +13,21 @@ const Tooltip = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.variant = 'hover';
     this.popover = null;
     this.placement = 'top';
-    this.strategy = 'absolute';
+    this.strategy = 'fixed';
     this.show = false;
     this.canManuallyClose = true;
   }
   componentShouldUpdate() {
-    this._setOptions();
+    this._update();
+  }
+  disconnectedCallback() {
+    if (this._cleanup) {
+      this._cleanup();
+      this._cleanup = null;
+    }
   }
   render() {
-    return (h(Host, { class: "p-popover" }, h("slot", { name: "content" }), h("div", { class: "popover-container" }, h("div", { class: `popover variant-${this.variant}`, role: "popover", ref: (el) => this._load(el) }, this.popover ? this.popover : h("slot", { name: "popover" }), h("div", { class: "arrow", "data-popper-arrow": true })))));
+    return (h(Host, { class: "p-popover" }, h("slot", { name: "content" }), h("div", { class: "popover-container" }, h("div", { class: `popover variant-${this.variant}`, role: "popover", "data-placement": this.placement, "data-strategy": this.strategy, ref: (el) => this._load(el) }, this.popover ? this.popover : h("slot", { name: "popover" }), h("div", { class: "arrow" })))));
   }
   clickHandler() {
     if (this.variant === 'hover') {
@@ -57,63 +63,70 @@ const Tooltip = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     if (!this._loaded) {
       return;
     }
+    this._cleanup = autoUpdate(this._el, this._popover, () => this._update());
     // Make the popover visible
     this._popover.setAttribute('data-show', '');
-    // Enable the event listeners
-    this._popper.setOptions((options) => (Object.assign(Object.assign({}, options), { modifiers: [
-        ...options.modifiers,
-        { name: 'eventListeners', enabled: true },
-      ] })));
     // Update its position
-    this._popper.update();
     this.isOpen.emit(true);
   }
   _hide() {
     if (!this._loaded) {
       return;
     }
+    if (this._cleanup) {
+      this._cleanup();
+      this._cleanup = null;
+    }
     // Hide the popover
     this._popover.removeAttribute('data-show');
-    // Disable the event listeners
-    this._popper.setOptions((options) => (Object.assign(Object.assign({}, options), { modifiers: [
-        ...options.modifiers,
-        { name: 'eventListeners', enabled: false },
-      ] })));
     this.isOpen.emit(false);
   }
   _load(popover) {
     this._popover = popover;
     if (popover) {
-      this._popper = createPopper(this._el, popover, {
-        strategy: this.strategy,
-      });
-      this._setOptions();
+      this._update();
       this._loaded = true;
       if (this.show) {
         setTimeout(() => this._show(), 100);
       }
     }
   }
-  _setOptions() {
-    if (!this._popper) {
+  _update() {
+    if (!this._popover) {
       return;
     }
-    this._popper.setOptions({
+    const arrowEl = this._popover.querySelector('.arrow');
+    if (!arrowEl) {
+      return;
+    }
+    computePosition(this._el, this._popover, {
       placement: this.variant === 'error' ? 'top-end' : this.placement,
-      modifiers: [
-        {
-          name: 'offset',
-          options: {
-            offset: this.variant === 'error' ? [8, 14] : [0, 8],
-          },
-        },
-        {
-          name: 'arrow',
-          options: {
-            padding: 4,
-          },
-        },
+      strategy: this.strategy,
+      // Try removing the arrow middleware. The arrow will no
+      // longer be centered to the reference element.
+      middleware: [
+        offset(8),
+        flip(),
+        shift(),
+        arrow({ element: arrowEl, padding: 8 }),
       ],
+    }).then(({ x, y, placement, middlewareData }) => {
+      this._popover.dataset.placement = placement;
+      Object.assign(this._popover.style, {
+        top: `${y}px`,
+        left: `${x}px`,
+      });
+      if (middlewareData.arrow) {
+        const { x, y } = middlewareData.arrow;
+        Object.assign(arrowEl.style, {
+          left: this.variant === 'error'
+            ? 'calc(100% - 1rem)'
+            : x != null
+              ? `${x}px`
+              : '',
+          top: y != null ? `${y}px` : '',
+        });
+      }
     });
   }
   get _el() { return this; }

package/dist/components/tooltip.component.js.map

@@ -1 +1 @@
-{"file":"tooltip.component.js","mappings":"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","names":[],"sources":["./src/components/atoms/tooltip/tooltip.component.scss?tag=p-tooltip&encapsulation=shadow","./src/components/atoms/tooltip/tooltip.component.tsx"],"sourcesContent":[":host {\n    @apply flex cursor-pointer;\n\n    .popover-container {\n        @apply relative h-0 w-0;\n        .popover {\n            @apply z-tooltip hidden rounded bg-white py-2 px-3 text-xs font-medium drop-shadow-4;\n            max-width: 14.5rem;\n\n            &.variant-hover,\n            &.variant-error {\n                @apply bg-storm py-1 text-white;\n            }\n\n            &.variant-error {\n                @apply whitespace-nowrap bg-negative uppercase tracking-wider;\n            }\n\n            &[data-show] {\n                @apply inline-block;\n            }\n\n            .arrow,\n            .arrow::before {\n                background: inherit;\n                @apply absolute h-2 w-2;\n            }\n\n            .arrow {\n                visibility: hidden;\n\n                &::before {\n                    @apply visible rotate-45 transform;\n                    content: '';\n                }\n            }\n\n            &[data-popper-placement^='top'] > .arrow {\n                @apply -bottom-1;\n            }\n\n            &[data-popper-placement^='bottom'] > .arrow {\n                @apply -top-1;\n            }\n\n            &[data-popper-placement^='left'] > .arrow {\n                @apply -right-1;\n            }\n\n            &[data-popper-placement^='right'] > .arrow {\n                @apply -left-1;\n            }\n        }\n    }\n}\n","import { createPopper, Placement, PositioningStrategy } from '@popperjs/core';\nimport {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Listen,\n    Prop,\n} from '@stencil/core';\n\n@Component({\n    tag: 'p-tooltip',\n    styleUrl: 'tooltip.component.scss',\n    shadow: true,\n})\nexport class Tooltip {\n    /**\n     * The variant of the popover\n     */\n    @Prop() variant: 'hover' | 'click' | 'error' = 'hover';\n\n    /**\n     * The content of the popover\n     */\n    @Prop() popover: any = null;\n\n    /**\n     * The placement of the popover\n     */\n    @Prop() placement: Placement = 'top';\n\n    /**\n     * The strategy of the popover placement\n     */\n    @Prop() strategy: PositioningStrategy = 'absolute';\n\n    /**\n     * Wether to show the popover\n     */\n    @Prop() show: boolean = false;\n\n    /**\n     * Wether to someone can manually close the popover\n     */\n    @Prop() canManuallyClose: boolean = true;\n\n    /**\n     * Open change event\n     */\n    @Event() isOpen: EventEmitter<boolean>;\n\n    /**\n     * The host element\n     */\n    @Element() private _el: HTMLElement;\n\n    private _loaded = false;\n    private _popper: any;\n    private _popover: HTMLElement;\n\n    componentShouldUpdate() {\n        this._setOptions();\n    }\n\n    render() {\n        return (\n            <Host class=\"p-popover\">\n                <slot name=\"content\" />\n                <div class=\"popover-container\">\n                    <div\n                        class={`popover variant-${this.variant}`}\n                        role=\"popover\"\n                        ref={(el) => this._load(el)}\n                    >\n                        {this.popover ? this.popover : <slot name=\"popover\" />}\n                        <div class=\"arrow\" data-popper-arrow></div>\n                    </div>\n                </div>\n            </Host>\n        );\n    }\n\n    @Listen('click', { capture: true })\n    protected clickHandler() {\n        if (this.variant === 'hover') {\n            return;\n        }\n\n        if (this._popover.hasAttribute('data-show')) {\n            return;\n        }\n\n        this._show();\n    }\n\n    @Listen('click', { target: 'document', capture: true })\n    protected documentClickHandler() {\n        if (this.variant === 'hover' || !this.canManuallyClose) {\n            return;\n        }\n\n        if (!this._popover.hasAttribute('data-show')) {\n            return;\n        }\n\n        this._hide();\n    }\n\n    @Listen('mouseenter')\n    @Listen('focus')\n    protected mouseEnterHandler() {\n        if (this.variant !== 'hover') {\n            return;\n        }\n\n        this._show();\n    }\n\n    @Listen('mouseleave')\n    @Listen('blur')\n    protected mouseLeaveHandler() {\n        if (this.show || this.variant !== 'hover') {\n            return;\n        }\n\n        this._hide();\n    }\n\n    private _show() {\n        if (!this._loaded) {\n            return;\n        }\n\n        // Make the popover visible\n        this._popover.setAttribute('data-show', '');\n\n        // Enable the event listeners\n        this._popper.setOptions((options) => ({\n            ...options,\n            modifiers: [\n                ...options.modifiers,\n                { name: 'eventListeners', enabled: true },\n            ],\n        }));\n\n        // Update its position\n        this._popper.update();\n        this.isOpen.emit(true);\n    }\n\n    private _hide() {\n        if (!this._loaded) {\n            return;\n        }\n\n        // Hide the popover\n        this._popover.removeAttribute('data-show');\n\n        // Disable the event listeners\n        this._popper.setOptions((options) => ({\n            ...options,\n            modifiers: [\n                ...options.modifiers,\n                { name: 'eventListeners', enabled: false },\n            ],\n        }));\n        this.isOpen.emit(false);\n    }\n\n    private _load(popover: HTMLElement) {\n        this._popover = popover;\n        if (popover) {\n            this._popper = createPopper(this._el, popover, {\n                strategy: this.strategy,\n            });\n\n            this._setOptions();\n            this._loaded = true;\n\n            if (this.show) {\n                setTimeout(() => this._show(), 100);\n            }\n        }\n    }\n\n    private _setOptions() {\n        if (!this._popper) {\n            return;\n        }\n\n        this._popper.setOptions({\n            placement: this.variant === 'error' ? 'top-end' : this.placement,\n            modifiers: [\n                {\n                    name: 'offset',\n                    options: {\n                        offset: this.variant === 'error' ? [8, 14] : [0, 8],\n                    },\n                },\n                {\n                    name: 'arrow',\n                    options: {\n                        padding: 4,\n                    },\n                },\n            ],\n        });\n    }\n}\n"],"version":3}
+{"file":"tooltip.component.js","mappings":"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","names":[],"sources":["./src/components/atoms/tooltip/tooltip.component.scss?tag=p-tooltip&encapsulation=shadow","./src/components/atoms/tooltip/tooltip.component.tsx"],"sourcesContent":[":host {\n    @apply flex cursor-pointer;\n\n    .popover-container {\n        @apply relative h-0 w-0;\n        .popover {\n            @apply left-0 top-0 z-tooltip inline-block rounded bg-white px-3 py-2 text-xs font-medium opacity-0 drop-shadow-4 transition-opacity;\n            width: max-content;\n            max-width: 14.5rem;\n\n            &.variant-hover,\n            &.variant-error {\n                @apply bg-storm py-1 text-white;\n            }\n\n            &.variant-error {\n                @apply bg-negative uppercase tracking-wider;\n            }\n\n            &[data-show] {\n                @apply opacity-100;\n            }\n\n            .arrow,\n            .arrow::before {\n                background: inherit;\n                @apply absolute h-2 w-2;\n            }\n\n            .arrow {\n                visibility: hidden;\n\n                &::before {\n                    @apply visible rotate-45 transform;\n                    content: '';\n                }\n            }\n\n            &[data-strategy='fixed'] {\n                @apply fixed;\n            }\n\n            &[data-strategy='absolute'] {\n                @apply absolute;\n            }\n\n            &[data-placement^='top'] > .arrow {\n                @apply -bottom-1;\n            }\n\n            &[data-placement^='bottom'] > .arrow {\n                @apply -top-1;\n            }\n\n            &[data-placement^='left'] > .arrow {\n                @apply -right-1;\n            }\n\n            &[data-placement^='right'] > .arrow {\n                @apply -left-1;\n            }\n        }\n    }\n}\n","import {\n    arrow,\n    autoUpdate,\n    computePosition,\n    flip,\n    offset,\n    Placement,\n    shift,\n    Strategy,\n} from '@floating-ui/dom';\nimport {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Listen,\n    Prop,\n} from '@stencil/core';\n\n@Component({\n    tag: 'p-tooltip',\n    styleUrl: 'tooltip.component.scss',\n    shadow: true,\n})\nexport class Tooltip {\n    /**\n     * The variant of the popover\n     */\n    @Prop() variant: 'hover' | 'click' | 'error' = 'hover';\n\n    /**\n     * The content of the popover\n     */\n    @Prop() popover: any = null;\n\n    /**\n     * The placement of the popover\n     */\n    @Prop() placement: Placement = 'top';\n\n    /**\n     * The strategy of the popover placement\n     */\n    @Prop() strategy: Strategy = 'fixed';\n\n    /**\n     * Wether to show the popover\n     */\n    @Prop() show: boolean = false;\n\n    /**\n     * Wether to someone can manually close the popover\n     */\n    @Prop() canManuallyClose: boolean = true;\n\n    /**\n     * Open change event\n     */\n    @Event() isOpen: EventEmitter<boolean>;\n\n    /**\n     * The host element\n     */\n    @Element() private _el: HTMLElement;\n\n    private _loaded = false;\n    private _popover: HTMLElement;\n    private _cleanup: () => void;\n\n    componentShouldUpdate() {\n        this._update();\n    }\n\n    disconnectedCallback() {\n        if (this._cleanup) {\n            this._cleanup();\n            this._cleanup = null;\n        }\n    }\n\n    render() {\n        return (\n            <Host class=\"p-popover\">\n                <slot name=\"content\" />\n                <div class=\"popover-container\">\n                    <div\n                        class={`popover variant-${this.variant}`}\n                        role=\"popover\"\n                        data-placement={this.placement}\n                        data-strategy={this.strategy}\n                        ref={(el) => this._load(el)}\n                    >\n                        {this.popover ? this.popover : <slot name=\"popover\" />}\n                        <div class=\"arrow\"></div>\n                    </div>\n                </div>\n            </Host>\n        );\n    }\n\n    @Listen('click', { capture: true })\n    protected clickHandler() {\n        if (this.variant === 'hover') {\n            return;\n        }\n\n        if (this._popover.hasAttribute('data-show')) {\n            return;\n        }\n\n        this._show();\n    }\n\n    @Listen('click', { target: 'document', capture: true })\n    protected documentClickHandler() {\n        if (this.variant === 'hover' || !this.canManuallyClose) {\n            return;\n        }\n\n        if (!this._popover.hasAttribute('data-show')) {\n            return;\n        }\n\n        this._hide();\n    }\n\n    @Listen('mouseenter')\n    @Listen('focus')\n    protected mouseEnterHandler() {\n        if (this.variant !== 'hover') {\n            return;\n        }\n\n        this._show();\n    }\n\n    @Listen('mouseleave')\n    @Listen('blur')\n    protected mouseLeaveHandler() {\n        if (this.show || this.variant !== 'hover') {\n            return;\n        }\n\n        this._hide();\n    }\n\n    private _show() {\n        if (!this._loaded) {\n            return;\n        }\n\n        this._cleanup = autoUpdate(this._el, this._popover, () =>\n            this._update()\n        );\n        // Make the popover visible\n        this._popover.setAttribute('data-show', '');\n\n        // Update its position\n        this.isOpen.emit(true);\n    }\n\n    private _hide() {\n        if (!this._loaded) {\n            return;\n        }\n\n        if (this._cleanup) {\n            this._cleanup();\n            this._cleanup = null;\n        }\n\n        // Hide the popover\n        this._popover.removeAttribute('data-show');\n        this.isOpen.emit(false);\n    }\n\n    private _load(popover: HTMLElement) {\n        this._popover = popover;\n        if (popover) {\n            this._update();\n            this._loaded = true;\n\n            if (this.show) {\n                setTimeout(() => this._show(), 100);\n            }\n        }\n    }\n\n    private _update() {\n        if (!this._popover) {\n            return;\n        }\n\n        const arrowEl = this._popover.querySelector('.arrow') as HTMLElement;\n        if (!arrowEl) {\n            return;\n        }\n\n        computePosition(this._el, this._popover, {\n            placement: this.variant === 'error' ? 'top-end' : this.placement,\n            strategy: this.strategy,\n            // Try removing the arrow middleware. The arrow will no\n            // longer be centered to the reference element.\n            middleware: [\n                offset(8),\n                flip(),\n                shift(),\n                arrow({ element: arrowEl, padding: 8 }),\n            ],\n        }).then(({ x, y, placement, middlewareData }) => {\n            this._popover.dataset.placement = placement;\n            Object.assign(this._popover.style, {\n                top: `${y}px`,\n                left: `${x}px`,\n            });\n\n            if (middlewareData.arrow) {\n                const { x, y } = middlewareData.arrow;\n\n                Object.assign(arrowEl.style, {\n                    left:\n                        this.variant === 'error'\n                            ? 'calc(100% - 1rem)'\n                            : x != null\n                            ? `${x}px`\n                            : '',\n                    top: y != null ? `${y}px` : '',\n                });\n            }\n        });\n    }\n}\n"],"version":3}