@paperless/core 2.0.1-beta.2 → 2.0.1-beta.21

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

@@ -1,383 +1,468 @@
-import { arrow, autoUpdate, computePosition, flip, offset, shift, } from "@floating-ui/dom";
+import { autoUpdate, computePosition, flip, offset, shift, } from "@floating-ui/dom";
 import { h, Host, } from "@stencil/core";
+import { cva } from "class-variance-authority";
+const popover = cva([
+    'inline-block px-2',
+    'text-xs',
+    'opacity-0 drop-shadow-3 transition-opacity',
+    'rounded-lg',
+    'z-tooltip',
+    'pointer-events-none',
+], {
+    variants: {
+        variant: {
+            hover: 'bg-black-teal text-white py-1',
+            click: null,
+            error: 'max-w-full w-full',
+        },
+        strategy: {
+            none: null,
+            fixed: 'fixed',
+            absolute: 'absolute',
+        },
+    },
+    compoundVariants: [
+        {
+            variant: ['hover', 'click'],
+            class: 'max-w-[14.5rem] w-max',
+        },
+        {
+            variant: ['click', 'error'],
+            class: 'bg-white text-black-teal-300 py-2',
+        },
+    ],
+});
+const portal = cva('', {
+    variants: {
+        strategy: {
+            fixed: 'fixed',
+            absolute: 'absolute',
+        },
+    },
+});
 export class Tooltip {
-  constructor() {
-    this._hasContentSlot = false;
-    this._loaded = false;
-    this.variant = 'hover';
-    this.content = null;
-    this.placement = 'top';
-    this.offset = 8;
-    this.strategy = 'absolute';
-    this.enableUserInput = true;
-    this.show = false;
-    this.canManuallyClose = true;
-  }
-  componentWillLoad() {
-    this._hasContentSlot = !!this._el.querySelector(':scope > [slot="content"]');
-  }
-  componentShouldUpdate() {
-    this._update();
-  }
-  disconnectedCallback() {
-    if (this._cleanup) {
-      this._cleanup();
-      this._cleanup = null;
-    }
-  }
-  render() {
-    return (h(Host, { class: 'p-popover' }, h("slot", { name: 'trigger' }), 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.content ? this.content : h("slot", { name: 'content' }), h("div", { class: 'arrow' })))));
-  }
-  clickHandler() {
-    if (this.variant === 'hover' || !this.enableUserInput) {
-      return;
+    constructor() {
+        this.variant = 'hover';
+        this.content = null;
+        this.placement = undefined;
+        this.offset = 8;
+        this.strategy = 'absolute';
+        this.enableUserInput = true;
+        this.show = false;
+        this.usePortal = false;
+        this.canManuallyClose = true;
     }
-    if (this._popover.hasAttribute('data-show')) {
-      return;
+    /**
+     * Open change event
+     */
+    isOpen;
+    /**
+     * The host element
+     */
+    _el;
+    _hasContentSlot = false;
+    _loaded = false;
+    _popover;
+    _cleanup;
+    componentWillLoad() {
+        this._hasContentSlot = !!this._el.querySelector(':scope > [slot="content"]');
     }
-    this._show();
-  }
-  documentClickHandler() {
-    if (this.variant === 'hover' || !this.canManuallyClose || this.show) {
-      return;
+    componentShouldUpdate() {
+        this._update();
     }
-    if (!this._popover.hasAttribute('data-show')) {
-      return;
+    disconnectedCallback() {
+        if (this._cleanup) {
+            this._cleanup();
+            this._cleanup = null;
+        }
     }
-    this._hide();
-  }
-  mouseEnterHandler() {
-    if (this.variant !== 'hover' || !this.enableUserInput) {
-      return;
+    render() {
+        const tooltipProps = {
+            role: 'popover',
+            'data-placement': this.placement,
+            ref: el => this._load(el),
+        };
+        let tooltip;
+        const tooltipElement = (h("div", { key: 'e773c573f879f37ca26e3efb0621a148150cc988', class: popover({
+                variant: this.variant,
+                strategy: this.usePortal ? 'none' : this.strategy,
+            }), ...(this.usePortal ? {} : tooltipProps) }, h("div", { key: 'beae5aa49190a54cb3852aed32989e4393a4577b', class: 'flex gap-2' }, this.variant === 'error' && (h("div", { key: '2df89a5828f590f1140e7b49d0fdbc0bbd342e76', class: 'w-[2px] bg-negative-red' })), this.content ? this.content : h("slot", { name: 'content' }))));
+        if (this.usePortal) {
+            tooltip = (h("p-portal", { key: 'b10a6efabbd222ac3f49ce1ed609225d43aef28c', class: portal({
+                    strategy: this.strategy,
+                }), ...tooltipProps }, tooltipElement));
+        }
+        else {
+            tooltip = tooltipElement;
+        }
+        return (h(Host, { key: '49b2555dfde9308712f54352b71b6b3392237f92', class: 'p-popover flex cursor-pointer' }, h("div", { key: '75bfdc10b8af271be06fb857d3f08e040c05711a', class: 'relative h-inherit w-inherit' }, h("slot", { key: '9dae75ed3b6edb2384b8a5d5b573aad90278a875', name: 'trigger' }), tooltip)));
     }
-    this._show();
-  }
-  mouseLeaveHandler() {
-    if (this.show || this.variant !== 'hover' || !this.enableUserInput) {
-      return;
+    clickHandler() {
+        if (this.variant === 'hover' || !this.enableUserInput) {
+            return;
+        }
+        if (this._popover.hasAttribute('data-show')) {
+            return;
+        }
+        this._show();
     }
-    this._hide();
-  }
-  onShowChange(show) {
-    if (show && !this._popover.hasAttribute('data-show')) {
-      return this._show();
+    documentClickHandler() {
+        if (this.variant === 'hover' || !this.canManuallyClose || this.show) {
+            return;
+        }
+        if (!this._popover.hasAttribute('data-show')) {
+            return;
+        }
+        this._hide();
     }
-    return this._hide();
-  }
-  _show() {
-    var _a;
-    if (!this._loaded) {
-      return;
+    mouseEnterHandler() {
+        if (this.variant !== 'hover' || !this.enableUserInput) {
+            return;
+        }
+        this._show();
     }
-    if (!((_a = this.content) === null || _a === void 0 ? void 0 : _a.length) && !this._hasContentSlot) {
-      if (this._popover.hasAttribute('data-show')) {
+    mouseLeaveHandler() {
+        if (this.show || this.variant !== 'hover' || !this.enableUserInput) {
+            return;
+        }
         this._hide();
-      }
-      return;
-    }
-    this._cleanup = autoUpdate(this._el, this._popover, () => this._update());
-    // Make the popover visible
-    this._popover.setAttribute('data-show', '');
-    // Update its position
-    this.isOpen.emit(true);
-  }
-  _hide() {
-    if (!this._loaded) {
-      return;
     }
-    if (this._cleanup) {
-      this._cleanup();
-      this._cleanup = null;
+    onShowChange(show) {
+        if (show && !this._popover.hasAttribute('data-show')) {
+            return this._show();
+        }
+        return this._hide();
     }
-    // Hide the popover
-    this._popover.removeAttribute('data-show');
-    this.isOpen.emit(false);
-  }
-  _load(popover) {
-    this._popover = popover;
-    if (popover) {
-      this._update();
-      this._loaded = true;
-      if (this.show) {
-        setTimeout(() => this._show(), 100);
-      }
+    _show() {
+        if (!this._loaded) {
+            return;
+        }
+        if (!this.content?.length && !this._hasContentSlot) {
+            if (this._popover.hasAttribute('data-show')) {
+                this._hide();
+            }
+            return;
+        }
+        this._cleanup = autoUpdate(this._el, this._popover, () => this._update());
+        // Make the popover visible
+        this._popover.setAttribute('data-show', '');
+        this._popover.classList.remove('opacity-0', 'pointer-events-none');
+        this._popover.classList.add('opacity-100', 'pointer-events-auto');
+        // Update its position
+        this.isOpen.emit(true);
     }
-  }
-  _update() {
-    if (!this._popover) {
-      return;
+    _hide() {
+        if (!this._loaded) {
+            return;
+        }
+        if (this._cleanup) {
+            this._cleanup();
+            this._cleanup = null;
+        }
+        // Hide the popover
+        this._popover.removeAttribute('data-show');
+        this._popover.classList.remove('opacity-100', 'pointer-events-auto');
+        this._popover.classList.add('opacity-0', 'pointer-events-none');
+        this.isOpen.emit(false);
     }
-    const arrowEl = this._popover.querySelector('.arrow');
-    if (!arrowEl) {
-      return;
+    _load(popover) {
+        this._popover = popover;
+        if (popover) {
+            this._update();
+            this._loaded = true;
+            if (this.show) {
+                setTimeout(() => this._show(), 100);
+            }
+        }
     }
-    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 : this.offset),
-        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` : '',
+    _update() {
+        if (!this._popover) {
+            return;
+        }
+        computePosition(this._el, this._popover, {
+            placement: this.variant === 'error' && !this.placement
+                ? 'bottom-start'
+                : this.placement ?? 'top',
+            strategy: this.strategy,
+            middleware: [offset(this.offset), flip(), shift()],
+        }).then(({ x, y, placement }) => {
+            this._popover.dataset.placement = placement;
+            Object.assign(this._popover.style, {
+                top: `${y}px`,
+                left: `${x}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' | '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'"
-      },
-      "content": {
-        "type": "any",
-        "mutable": false,
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The content of the popover"
-        },
-        "attribute": "content",
-        "reflect": false,
-        "defaultValue": "null"
-      },
-      "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",
-              "id": "../../node_modules/@floating-ui/dom/index.d.ts::Placement"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The placement of the popover"
-        },
-        "attribute": "placement",
-        "reflect": false,
-        "defaultValue": "'top'"
-      },
-      "offset": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The offset of the popover"
-        },
-        "attribute": "offset",
-        "reflect": false,
-        "defaultValue": "8"
-      },
-      "strategy": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "Strategy",
-          "resolved": "\"absolute\" | \"fixed\"",
-          "references": {
-            "Strategy": {
-              "location": "import",
-              "path": "@floating-ui/dom",
-              "id": "../../node_modules/@floating-ui/dom/index.d.ts::Strategy"
+    }
+    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"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "variant",
+                "reflect": false,
+                "defaultValue": "'hover'"
+            },
+            "content": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The content of the popover"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "content",
+                "reflect": false,
+                "defaultValue": "null"
+            },
+            "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",
+                            "id": "../../node_modules/@floating-ui/dom/dist/floating-ui.dom.d.ts::Placement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The placement of the popover"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "placement",
+                "reflect": false
+            },
+            "offset": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The offset of the popover"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "offset",
+                "reflect": false,
+                "defaultValue": "8"
+            },
+            "strategy": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Strategy",
+                    "resolved": "\"absolute\" | \"fixed\"",
+                    "references": {
+                        "Strategy": {
+                            "location": "import",
+                            "path": "@floating-ui/dom",
+                            "id": "../../node_modules/@floating-ui/dom/dist/floating-ui.dom.d.ts::Strategy"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The strategy of the popover placement"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "strategy",
+                "reflect": false,
+                "defaultValue": "'absolute'"
+            },
+            "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"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "enable-user-input",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "show": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Wether to show the popover"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "show",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "usePortal": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Wether to use a portal for the tooltip"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "use-portal",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "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"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "can-manually-close",
+                "reflect": false,
+                "defaultValue": "true"
             }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The strategy of the popover placement"
-        },
-        "attribute": "strategy",
-        "reflect": false,
-        "defaultValue": "'absolute'"
-      },
-      "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"
-      },
-      "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": "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": false,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Open change event"
-        },
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        }
-      }];
-  }
-  static get elementRef() { return "_el"; }
-  static get watchers() {
-    return [{
-        "propName": "show",
-        "methodName": "onShowChange"
-      }];
-  }
-  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 events() {
+        return [{
+                "method": "isOpen",
+                "name": "isOpen",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Open change event"
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "_el"; }
+    static get watchers() {
+        return [{
+                "propName": "show",
+                "methodName": "onShowChange"
+            }];
+    }
+    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