npm - @paperless/core - Versions diffs - 0.1.0-alpha.99 → 1.0.1 - Mend

@paperless/core 0.1.0-alpha.99 → 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1090) hide show

package/dist/collection/components/atoms/tooltip/tooltip.component.css CHANGED Viewed

@@ -1,43 +1 @@
-:host {
-  @apply flex cursor-pointer;
-}
-:host .popover-container {
-  @apply w-0 h-0 relative;
-}
-:host .popover-container .popover {
-  @apply bg-white hidden text-xs font-medium py-2 px-3 rounded drop-shadow-4;
-  max-width: 14.5rem;
-}
-:host .popover-container .popover.variant-hover, :host .popover-container .popover.variant-error {
-  @apply bg-storm text-white py-1;
-}
-:host .popover-container .popover.variant-error {
-  @apply bg-negative uppercase tracking-wider;
-}
-:host .popover-container .popover[data-show] {
-  @apply block;
-}
-:host .popover-container .popover .arrow,
-:host .popover-container .popover .arrow::before {
-  background: inherit;
-  @apply absolute w-2 h-2;
-}
-:host .popover-container .popover .arrow {
-  visibility: hidden;
-}
-:host .popover-container .popover .arrow::before {
-  @apply visible transform rotate-45;
-  content: "";
-}
-:host .popover-container .popover[data-popper-placement^=top] > .arrow {
-  @apply -bottom-1;
-}
-:host .popover-container .popover[data-popper-placement^=bottom] > .arrow {
-  @apply -top-1;
-}
-:host .popover-container .popover[data-popper-placement^=left] > .arrow {
-  @apply -right-1;
-}
-:host .popover-container .popover[data-popper-placement^=right] > .arrow {
-  @apply -left-1;
-} .static{position:static!important}.ml-2{margin-left:.5rem!important}.flex{display:flex!important}.items-end{align-items:flex-end!important}.justify-between{justify-content:space-between!important}.text-negative{--tw-text-opacity:1!important;color:rgb(185 30 40/var(--tw-text-opacity))!important}.text-negative-light{--tw-text-opacity:1!important;color:rgb(255 204 211/var(--tw-text-opacity))!important}*{box-sizing:border-box}.hover\:text-negative:hover{--tw-text-opacity:1!important;color:rgb(185 30 40/var(--tw-text-opacity))!important}.static{position:static!important}*{box-sizing:border-box}.visible{visibility:visible!important}.static{position:static!important}.fixed{position:fixed!important}.blur{--tw-blur:blur(8px)!important;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}.static{position:static!important}*{box-sizing:border-box}.visible{visibility:visible!important}.static{position:static!important}.fixed{position:fixed!important}.blur{--tw-blur:blur(8px)!important;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}.visible{visibility:visible!important}.static{position:static!important}.fixed{position:fixed!important}.blur{--tw-blur:blur(8px)!important;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}
+.visible{visibility:visible!important}.fixed{position:fixed!important}.absolute{position:absolute!important}.relative{position:relative!important}.left-0{left:0!important}.top-0{top:0!important}.z-tooltip{z-index:601!important}.inline-block{display:inline-block!important}.flex{display:flex!important}.hidden{display:none!important}.h-0{height:0!important}.h-2{height:.5rem!important}.rotate-45{--tw-rotate:45deg!important}.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}.rounded{border-radius:.25rem!important}.bg-negative{background-color:rgb(185 30 40/var(--tw-bg-opacity))!important}.bg-negative,.bg-storm{--tw-bg-opacity:1!important}.bg-storm{background-color:rgb(81 83 107/var(--tw-bg-opacity))!important}.bg-white{--tw-bg-opacity:1!important;background-color:rgb(255 255 255/var(--tw-bg-opacity))!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}.text-xs{font-size:.75rem!important;line-height:1rem!important}.font-medium{font-weight:500!important}.uppercase{text-transform:uppercase!important}.opacity-0{opacity:0!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: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}: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-error-element,: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,:host .popover-container .popover.variant-error-element{--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}.static{position:static!important}.h-8{height:2rem!important}.min-w-0{min-width:0!important}.flex-1{flex:1 1 0%!important}.items-start{align-items:flex-start!important}.items-center{align-items:center!important}.justify-start{justify-content:flex-start!important}.gap-2{gap:.5rem!important}.gap-4{gap:1rem!important}.overflow-hidden{overflow:hidden!important}.text-ellipsis{text-overflow:ellipsis!important}.whitespace-nowrap{white-space:nowrap!important}.rounded-large{border-radius:.375rem!important}.bg-mystic{--tw-bg-opacity:1!important;background-color:rgb(247 250 252/var(--tw-bg-opacity))!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.text-negative{--tw-text-opacity:1!important;color:rgb(185 30 40/var(--tw-text-opacity))!important}.text-storm-medium{--tw-text-opacity:1!important;color:rgb(128 130 158/var(--tw-text-opacity))!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,.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}.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-xxs{font-size:.6875rem!important}.text-negative-light{--tw-text-opacity:1!important;color:rgb(255 204 211/var(--tw-text-opacity))!important}.hover\:text-negative:hover{--tw-text-opacity:1!important;color:rgb(185 30 40/var(--tw-text-opacity))!important}.inline{display:inline!important}.w-full{width:100%!important}.justify-center{justify-content:center!important}.blur{--tw-blur:blur(8px)!important;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}.cursor-pointer{cursor:pointer!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}.ml-1{margin-left:.25rem!important}.ml-2{margin-left:.5rem!important}.items-end{align-items:flex-end!important}.justify-between{justify-content:space-between!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-l-0{border-left-width:0!important}.border-r-0{border-right-width:0!important}.pl-0{padding-left:0!important}.pr-0{padding-right:0!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}.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}.h-6{height:1.5rem!important}.mb-14{margin-bottom:3.5rem!important}.mb-6{margin-bottom:1.5rem!important}.table{display:table!important}.w-6{width:1.5rem!important}.max-w-\[20rem\]{max-width:20rem!important}.flex-col{flex-direction:column!important}.self-center{align-self:center!important}.py-24{padding-bottom:6rem!important;padding-top:6rem!important}.text-center{text-align:center!important}.font-semibold{font-weight:600!important}.table-cell{display:table-cell!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}.w-auto{width:auto!important}.justify-end{justify-content:flex-end!important}.pr-4{padding-right:1rem!important}.text-storm-dark{--tw-text-opacity:1!important;color:rgb(39 40 56/var(--tw-text-opacity))!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}}.bottom-0{bottom:0!important}.block{display:block!important}.w-3\/4{width:75%!important}.border{border-width:1px!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}.p-4{padding:1rem!important}@media (min-width:64rem){.desktop-xs\:flex{display:flex!important}.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}}.m-0{margin:0!important}.table-row{display:table-row!important}

package/dist/collection/components/atoms/tooltip/tooltip.component.js CHANGED Viewed

@@ -1,46 +1,30 @@
-import { createPopper } from '@popperjs/core';
-import { Component, Element, Event, h, Host, Listen, Prop, } from '@stencil/core';
+import { arrow, autoUpdate, computePosition, flip, offset, shift, } from '@floating-ui/dom';
+import { h, Host, } from '@stencil/core';
 export class Tooltip {
   constructor() {
-    /**
-     * The variant of the popover
-     */
+    this._loaded = false;
     this.variant = 'hover';
-    /**
-     * The content of the popover
-     */
     this.popover = null;
-    /**
-     * The placement of the popover
-     */
     this.placement = 'top';
-    /**
-     * The strategy of the popover placement
-     */
-    this.strategy = 'fixed';
-    /**
-     * Wether to show the popover
-     */
+    this.strategy = 'absolute';
+    this.enableUserInput = true;
     this.show = false;
-    /**
-     * Wether to someone can manually close the popover
-     */
     this.canManuallyClose = true;
-    this._loaded = false;
   }
   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') {
+    if (this.variant === 'hover' || !this.enableUserInput) {
       return;
     }
     if (this._popover.hasAttribute('data-show')) {
@@ -49,7 +33,7 @@ export class Tooltip {
     this._show();
   }
   documentClickHandler() {
-    if (this.variant === 'hover' || !this.canManuallyClose) {
+    if (this.variant === 'hover' || !this.canManuallyClose || this.show) {
       return;
     }
     if (!this._popover.hasAttribute('data-show')) {
@@ -58,13 +42,13 @@ export class Tooltip {
     this._hide();
   }
   mouseEnterHandler() {
-    if (this.variant !== 'hover') {
+    if (this.variant !== 'hover' || !this.enableUserInput) {
       return;
     }
     this._show();
   }
   mouseLeaveHandler() {
-    if (this.show || this.variant !== 'hover') {
+    if (this.show || this.variant !== 'hover' || !this.enableUserInput) {
       return;
     }
     this._hide();
@@ -73,245 +57,281 @@ export class Tooltip {
     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({
-      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,
-          },
-        },
+    const arrowEl = this._popover.querySelector('.arrow');
+    if (!arrowEl) {
+      return;
+    }
+    computePosition(this._el, this._popover, {
+      placement: this.variant === 'error' || this.variant === 'error-element' ? 'top-end' : this.placement,
+      strategy: this.strategy,
+      middleware: [
+        offset(this.variant === 'error' ? 14 : 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' || this.variant === 'error-element'
+            ? placement.indexOf('start') >= 0
+              ? '1rem'
+              : 'calc(100% - 1rem)'
+            : x != null
+              ? `${x}px`
+              : '',
+          top: y != null ? `${y}px` : '',
+        });
+      }
     });
   }
   static get is() { return "p-tooltip"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["tooltip.component.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["tooltip.component.css"]
-  }; }
-  static get properties() { return {
-    "variant": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'hover' | 'click' | 'error'",
-        "resolved": "\"click\" | \"error\" | \"hover\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The variant of the popover"
-      },
-      "attribute": "variant",
-      "reflect": false,
-      "defaultValue": "'hover'"
-    },
-    "popover": {
-      "type": "any",
-      "mutable": false,
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
+  static get originalStyleUrls() {
+    return {
+      "$": ["tooltip.component.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["tooltip.component.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "variant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'hover' | 'click' | 'error' | 'error-element'",
+          "resolved": "\"click\" | \"error\" | \"error-element\" | \"hover\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The variant of the popover"
+        },
+        "attribute": "variant",
+        "reflect": false,
+        "defaultValue": "'hover'"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The content of the popover"
+      "popover": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The content of the popover"
+        },
+        "attribute": "popover",
+        "reflect": false,
+        "defaultValue": "null"
       },
-      "attribute": "popover",
-      "reflect": false,
-      "defaultValue": "null"
-    },
-    "placement": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "Placement",
-        "resolved": "\"auto\" | \"auto-end\" | \"auto-start\" | \"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
-        "references": {
-          "Placement": {
-            "location": "import",
-            "path": "@popperjs/core"
+      "placement": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Placement",
+          "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+          "references": {
+            "Placement": {
+              "location": "import",
+              "path": "@floating-ui/dom"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The placement of the popover"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The placement of the popover"
+        },
+        "attribute": "placement",
+        "reflect": false,
+        "defaultValue": "'top'"
       },
-      "attribute": "placement",
-      "reflect": false,
-      "defaultValue": "'top'"
-    },
-    "strategy": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "PositioningStrategy",
-        "resolved": "\"absolute\" | \"fixed\"",
-        "references": {
-          "PositioningStrategy": {
-            "location": "import",
-            "path": "@popperjs/core"
+      "strategy": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Strategy",
+          "resolved": "\"absolute\" | \"fixed\"",
+          "references": {
+            "Strategy": {
+              "location": "import",
+              "path": "@floating-ui/dom"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The strategy of the popover placement"
-      },
-      "attribute": "strategy",
-      "reflect": false,
-      "defaultValue": "'fixed'"
-    },
-    "show": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Wether to show the popover"
-      },
-      "attribute": "show",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "canManuallyClose": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The strategy of the popover placement"
+        },
+        "attribute": "strategy",
+        "reflect": false,
+        "defaultValue": "'absolute'"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Wether to someone can manually close the popover"
+      "enableUserInput": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Wether the tooltip can be shown by user input"
+        },
+        "attribute": "enable-user-input",
+        "reflect": false,
+        "defaultValue": "true"
       },
-      "attribute": "can-manually-close",
-      "reflect": false,
-      "defaultValue": "true"
-    }
-  }; }
-  static get events() { return [{
-      "method": "isOpen",
-      "name": "isOpen",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Open change event"
+      "show": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Wether to show the popover"
+        },
+        "attribute": "show",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "canManuallyClose": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Wether to someone can manually close the popover"
+        },
+        "attribute": "can-manually-close",
+        "reflect": false,
+        "defaultValue": "true"
       }
-    }]; }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "isOpen",
+        "name": "isOpen",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Open change event"
+        },
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        }
+      }];
+  }
   static get elementRef() { return "_el"; }
-  static get listeners() { return [{
-      "name": "click",
-      "method": "clickHandler",
-      "target": undefined,
-      "capture": true,
-      "passive": false
-    }, {
-      "name": "click",
-      "method": "documentClickHandler",
-      "target": "document",
-      "capture": true,
-      "passive": false
-    }, {
-      "name": "mouseenter",
-      "method": "mouseEnterHandler",
-      "target": undefined,
-      "capture": false,
-      "passive": true
-    }, {
-      "name": "focus",
-      "method": "mouseEnterHandler",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "mouseleave",
-      "method": "mouseLeaveHandler",
-      "target": undefined,
-      "capture": false,
-      "passive": true
-    }, {
-      "name": "blur",
-      "method": "mouseLeaveHandler",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }]; }
+  static get listeners() {
+    return [{
+        "name": "click",
+        "method": "clickHandler",
+        "target": undefined,
+        "capture": true,
+        "passive": false
+      }, {
+        "name": "click",
+        "method": "documentClickHandler",
+        "target": "document",
+        "capture": true,
+        "passive": false
+      }, {
+        "name": "mouseenter",
+        "method": "mouseEnterHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": true
+      }, {
+        "name": "focus",
+        "method": "mouseEnterHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "mouseleave",
+        "method": "mouseLeaveHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": true
+      }, {
+        "name": "blur",
+        "method": "mouseLeaveHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
 }
+//# sourceMappingURL=tooltip.component.js.map