@paperless/core 0.1.0-alpha.21 → 0.1.0-alpha.212

package/dist/collection/components/atoms/stepper-item/stepper-item.component.js

@@ -0,0 +1,109 @@
+import { Component, h, Host, Prop } from '@stencil/core';
+export class StepperItem {
+  constructor() {
+    /**
+     * The alignment of the step content
+     */
+    this.align = 'center';
+    /**
+     * The direction of the stepper step
+     */
+    this.direction = 'horizontal';
+    /**
+     * Wether the step is finished
+     */
+    this.finished = false;
+    /**
+     * Wether the step is active
+     */
+    this.active = false;
+  }
+  render() {
+    return (h(Host, { class: "p-stepper-item" },
+      h("div", { class: "content" },
+        h("slot", null)),
+      h("div", { class: "circle" }, this.finished && h("p-icon", { variant: "checkmark" }))));
+  }
+  static get is() { return "p-stepper-item"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["stepper-item.component.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["stepper-item.component.css"]
+  }; }
+  static get properties() { return {
+    "align": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'start' | 'center' | 'end'",
+        "resolved": "\"center\" | \"end\" | \"start\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The alignment of the step content"
+      },
+      "attribute": "align",
+      "reflect": true,
+      "defaultValue": "'center'"
+    },
+    "direction": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'horizontal' | 'vertical'",
+        "resolved": "\"horizontal\" | \"vertical\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The direction of the stepper step"
+      },
+      "attribute": "direction",
+      "reflect": true,
+      "defaultValue": "'horizontal'"
+    },
+    "finished": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Wether the step is finished"
+      },
+      "attribute": "finished",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "active": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Wether the step is active"
+      },
+      "attribute": "active",
+      "reflect": true,
+      "defaultValue": "false"
+    }
+  }; }
+}

package/dist/collection/components/atoms/stepper-line/stepper-line.component.css

@@ -0,0 +1,18 @@
+:host {
+  @apply flex-auto;
+  @apply transition duration-500 ease-in-out;
+  @apply block;
+  @apply bg-mystic-dark;
+}
+
+:host([direction=horizontal]) {
+  @apply h-[2px] mb-[calc(.5rem-1px)];
+}
+
+:host([direction=vertical]) {
+  @apply w-[2px] ml-[calc(.5rem-1px)];
+}
+
+:host([active]) {
+  @apply bg-indigo;
+} .static{position:static!important}*{box-sizing:border-box}.static{position:static!important}*{box-sizing:border-box}.static{position:static!important}*{box-sizing:border-box}.static{position:static!important}*{box-sizing:border-box}

package/dist/collection/components/atoms/stepper-line/stepper-line.component.js

@@ -0,0 +1,62 @@
+import { Component, h, Host, Prop } from '@stencil/core';
+export class StepperLine {
+  constructor() {
+    /**
+     * Wether the line is active
+     */
+    this.active = false;
+    /**
+     * The direction of the stepper line
+     */
+    this.direction = 'horizontal';
+  }
+  render() {
+    return h(Host, { class: "p-stepper-line" });
+  }
+  static get is() { return "p-stepper-line"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["stepper-line.component.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["stepper-line.component.css"]
+  }; }
+  static get properties() { return {
+    "active": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Wether the line is active"
+      },
+      "attribute": "active",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "direction": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'horizontal' | 'vertical'",
+        "resolved": "\"horizontal\" | \"vertical\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The direction of the stepper line"
+      },
+      "attribute": "direction",
+      "reflect": true,
+      "defaultValue": "'horizontal'"
+    }
+  }; }
+}

package/dist/collection/components/atoms/tab-group/tab-group.component.css

@@ -0,0 +1,9 @@
+:host {
+  @apply flex w-full flex-col relative;
+}
+:host .content {
+  @apply flex gap-5 w-full z-10;
+}
+:host p-divider {
+  @apply m-0 absolute bottom-0 left-0 w-full;
+} .static{position:static!important}*{box-sizing:border-box}

package/dist/collection/components/atoms/tab-group/tab-group.component.js

@@ -0,0 +1,17 @@
+import { Component, h, Host } from '@stencil/core';
+export class TabGroup {
+  render() {
+    return (h(Host, { class: "p-tab-group" },
+      h("div", { class: "content" },
+        h("slot", null)),
+      h("p-divider", null)));
+  }
+  static get is() { return "p-tab-group"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["tab-group.component.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["tab-group.component.css"]
+  }; }
+}

package/dist/collection/components/atoms/tab-item/tab-item.component.css

@@ -0,0 +1,10 @@
+:host {
+  @apply flex items-center h-10;
+  @apply font-semibold text-storm-medium;
+  @apply cursor-pointer;
+  @apply border-0 border-b-2 border-transparent !important;
+}
+
+:host(.active) {
+  @apply border-indigo text-indigo !important;
+} .static{position:static!important}*{box-sizing:border-box}

package/dist/collection/components/atoms/tab-item/tab-item.component.js

@@ -0,0 +1,41 @@
+import { Component, h, Host, Prop } from '@stencil/core';
+export class TabItem {
+  constructor() {
+    /**
+     * Wether the tab item is active
+     */
+    this.active = false;
+  }
+  render() {
+    return (h(Host, { class: `p-tab-item ${this.active && 'active'}` },
+      h("slot", null)));
+  }
+  static get is() { return "p-tab-item"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["tab-item.component.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["tab-item.component.css"]
+  }; }
+  static get properties() { return {
+    "active": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Wether the tab item is active"
+      },
+      "attribute": "active",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+}

package/dist/collection/components/atoms/table-container/table-container.component.css

@@ -0,0 +1,5 @@
+:host {
+  @apply flex flex-col w-full;
+  @apply bg-white rounded-large;
+  @apply shadow-4 !important;
+} .static{position:static!important}.flex{display:flex!important}.table{display:table!important}.hidden{display:none!important}.h-6{height:1.5rem!important}.w-6{width:1.5rem!important}.flex-col{flex-direction:column!important}.rounded{border-radius:.25rem!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}.static{position:static!important}.flex{display:flex!important}.h-6{height:1.5rem!important}.w-full{width:100%!important}.w-1\/12{width:8.333333%!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-10\/12{width:83.333333%!important}.w-11\/12{width:91.666667%!important}.w-auto{width:auto!important}.flex-1{flex:1 1 0%!important}.justify-start{justify-content:flex-start!important}.justify-end{justify-content:flex-end!important}.justify-center{justify-content:center!important}.rounded{border-radius:.25rem!important}.font-semibold{font-weight:600!important}.text-storm-dark{--tw-text-opacity:1!important;color:rgb(39 40 56/var(--tw-text-opacity))!important}*{box-sizing:border-box}@media (min-width:40rem){.tablet\:w-1\/12{width:8.333333%!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}.tablet\:w-10\/12{width:83.333333%!important}.tablet\:w-11\/12{width:91.666667%!important}}@media (min-width:64rem){.desktop-xs\:w-1\/12{width:8.333333%!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}.desktop-xs\:w-10\/12{width:83.333333%!important}.desktop-xs\:w-11\/12{width:91.666667%!important}}@media (min-width:80rem){.desktop-sm\:w-1\/12{width:8.333333%!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}.desktop-sm\:w-10\/12{width:83.333333%!important}.desktop-sm\:w-11\/12{width:91.666667%!important}}@media (min-width:85.375rem){.desktop\:w-1\/12{width:8.333333%!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}.desktop\:w-10\/12{width:83.333333%!important}.desktop\:w-11\/12{width:91.666667%!important}}@media (min-width:90rem){.desktop-lg\:w-1\/12{width:8.333333%!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}.desktop-lg\:w-10\/12{width:83.333333%!important}.desktop-lg\:w-11\/12{width:91.666667%!important}}@media (min-width:120rem){.desktop-xl\:w-1\/12{width:8.333333%!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}.desktop-xl\:w-10\/12{width:83.333333%!important}.desktop-xl\:w-11\/12{width:91.666667%!important}}.static{position:static!important}*{box-sizing:border-box}.static{position:static!important}.hidden{display:none!important}*{box-sizing:border-box}@media (min-width:64rem){.desktop-xs\:flex{display:flex!important}}.static{position:static!important}.fixed{position:fixed!important}.bottom-0{bottom:0!important}.left-0{left:0!important}.ml-1{margin-left:.25rem!important}.block{display:block!important}.flex{display:flex!important}.hidden{display:none!important}.w-full{width:100%!important}.flex-col{flex-direction:column!important}.justify-end{justify-content:flex-end!important}.gap-4{gap:1rem!important}.justify-self-end{justify-self:end!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}.bg-white{--tw-bg-opacity:1!important;background-color:rgb(255 255 255/var(--tw-bg-opacity))!important}.p-4{padding:1rem!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}@media (min-width:64rem){.desktop-xs\:flex{display:flex!important}.desktop-xs\:hidden{display:none!important}.desktop-xs\:w-auto{width:auto!important}.desktop-xs\:flex-row{flex-direction:row!important}}.static{position:static!important}.m-0{margin:0!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}*{box-sizing:border-box}.static{position:static!important}*{box-sizing:border-box}

package/dist/collection/components/atoms/table-container/table-container.component.js

@@ -0,0 +1,15 @@
+import { Component, h, Host } from '@stencil/core';
+export class TableContainer {
+  render() {
+    return (h(Host, { class: "p-table-container" },
+      h("slot", null)));
+  }
+  static get is() { return "p-table-container"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["table-container.component.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["table-container.component.css"]
+  }; }
+}

package/dist/collection/components/atoms/toast-container/toast-container.component.css

@@ -0,0 +1,5 @@
+:host {
+  @apply p-4 w-full flex flex-col gap-4 z-toast;
+  @apply max-w-full tablet:max-w-[26.5rem];
+  @apply z-[600];
+} .static{position:static!important}.fixed{position:fixed!important}.top-0{top:0!important}.bottom-0{bottom:0!important}.left-0{left:0!important}.right-0{right:0!important}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:85.375rem){.container{max-width:85.375rem}}@media (min-width:90rem){.container{max-width:90rem}}@media (min-width:120rem){.container{max-width:120rem}}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}*{box-sizing:border-box}

package/dist/collection/components/atoms/toast-container/toast-container.component.js

@@ -0,0 +1,48 @@
+import { Component, h, Host, Prop } from '@stencil/core';
+export class ToastContainer {
+  constructor() {
+    /**
+     * The placement of the container
+     */
+    this.placement = 'top-end';
+  }
+  render() {
+    return (h(Host, { class: {
+        'p-toast-container': true,
+        fixed: true,
+        'top-0': this.placement.indexOf('top') === 0,
+        'bottom-0': this.placement.indexOf('bottom') === 0,
+        'left-0': this.placement.indexOf('start') > 0,
+        'right-0': this.placement.indexOf('end') > 0,
+      } },
+      h("slot", null)));
+  }
+  static get is() { return "p-toast-container"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["toast-container.component.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["toast-container.component.css"]
+  }; }
+  static get properties() { return {
+    "placement": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'top-start' | 'top-end' | 'bottom-start' | 'bottom-end'",
+        "resolved": "\"bottom-end\" | \"bottom-start\" | \"top-end\" | \"top-start\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The placement of the container"
+      },
+      "attribute": "placement",
+      "reflect": false,
+      "defaultValue": "'top-end'"
+    }
+  }; }
+}

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

@@ -1,37 +1,43 @@
 :host {
-  @apply cursor-pointer inline-block;
+  @apply flex cursor-pointer;
 }
-:host .popover {
+: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.variant-hover {
+:host .popover-container .popover.variant-hover, :host .popover-container .popover.variant-error {
   @apply bg-storm text-white py-1;
 }
-:host .popover[data-show] {
+:host .popover-container .popover.variant-error {
+  @apply bg-negative uppercase tracking-wider;
+}
+:host .popover-container .popover[data-show] {
   @apply block;
 }
-:host .popover .arrow,
-:host .popover .arrow::before {
+:host .popover-container .popover .arrow,
+:host .popover-container .popover .arrow::before {
   background: inherit;
   @apply absolute w-2 h-2;
 }
-:host .popover .arrow {
+:host .popover-container .popover .arrow {
   visibility: hidden;
 }
-:host .popover .arrow::before {
+:host .popover-container .popover .arrow::before {
   @apply visible transform rotate-45;
   content: "";
 }
-:host .popover[data-popper-placement^=top] > .arrow {
+:host .popover-container .popover[data-popper-placement^=top] > .arrow {
   @apply -bottom-1;
 }
-:host .popover[data-popper-placement^=bottom] > .arrow {
+:host .popover-container .popover[data-popper-placement^=bottom] > .arrow {
   @apply -top-1;
 }
-:host .popover[data-popper-placement^=left] > .arrow {
+:host .popover-container .popover[data-popper-placement^=left] > .arrow {
   @apply -right-1;
 }
-:host .popover[data-popper-placement^=right] > .arrow {
+:host .popover-container .popover[data-popper-placement^=right] > .arrow {
   @apply -left-1;
-}
+} .static{position:static!important}.h-6{height:1.5rem!important}.w-full{width:100%!important}.cursor-pointer{cursor:pointer!important}.rounded{border-radius:.25rem!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}.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}.flex{display:flex!important}.table{display:table!important}.hidden{display:none!important}.h-6{height:1.5rem!important}.w-6{width:1.5rem!important}.flex-col{flex-direction:column!important}.rounded{border-radius:.25rem!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}.static{position:static!important}.flex{display:flex!important}.h-6{height:1.5rem!important}.w-full{width:100%!important}.w-1\/12{width:8.333333%!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-10\/12{width:83.333333%!important}.w-11\/12{width:91.666667%!important}.w-auto{width:auto!important}.flex-1{flex:1 1 0%!important}.justify-start{justify-content:flex-start!important}.justify-end{justify-content:flex-end!important}.justify-center{justify-content:center!important}.rounded{border-radius:.25rem!important}.font-semibold{font-weight:600!important}.text-storm-dark{--tw-text-opacity:1!important;color:rgb(39 40 56/var(--tw-text-opacity))!important}*{box-sizing:border-box}@media (min-width:40rem){.tablet\:w-1\/12{width:8.333333%!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}.tablet\:w-10\/12{width:83.333333%!important}.tablet\:w-11\/12{width:91.666667%!important}}@media (min-width:64rem){.desktop-xs\:w-1\/12{width:8.333333%!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}.desktop-xs\:w-10\/12{width:83.333333%!important}.desktop-xs\:w-11\/12{width:91.666667%!important}}@media (min-width:80rem){.desktop-sm\:w-1\/12{width:8.333333%!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}.desktop-sm\:w-10\/12{width:83.333333%!important}.desktop-sm\:w-11\/12{width:91.666667%!important}}@media (min-width:85.375rem){.desktop\:w-1\/12{width:8.333333%!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}.desktop\:w-10\/12{width:83.333333%!important}.desktop\:w-11\/12{width:91.666667%!important}}@media (min-width:90rem){.desktop-lg\:w-1\/12{width:8.333333%!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}.desktop-lg\:w-10\/12{width:83.333333%!important}.desktop-lg\:w-11\/12{width:91.666667%!important}}@media (min-width:120rem){.desktop-xl\:w-1\/12{width:8.333333%!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}.desktop-xl\:w-10\/12{width:83.333333%!important}.desktop-xl\:w-11\/12{width:91.666667%!important}}.static{position:static!important}*{box-sizing:border-box}.static{position:static!important}.hidden{display:none!important}*{box-sizing:border-box}@media (min-width:64rem){.desktop-xs\:flex{display:flex!important}}.static{position:static!important}.fixed{position:fixed!important}.bottom-0{bottom:0!important}.left-0{left:0!important}.ml-1{margin-left:.25rem!important}.block{display:block!important}.flex{display:flex!important}.hidden{display:none!important}.w-full{width:100%!important}.flex-col{flex-direction:column!important}.justify-end{justify-content:flex-end!important}.gap-4{gap:1rem!important}.justify-self-end{justify-self:end!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}.bg-white{--tw-bg-opacity:1!important;background-color:rgb(255 255 255/var(--tw-bg-opacity))!important}.p-4{padding:1rem!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}@media (min-width:64rem){.desktop-xs\:flex{display:flex!important}.desktop-xs\:hidden{display:none!important}.desktop-xs\:w-auto{width:auto!important}.desktop-xs\:flex-row{flex-direction:row!important}}.static{position:static!important}.m-0{margin:0!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}*{box-sizing:border-box}.static{position:static!important}.fixed{position:fixed!important}.bottom-0{bottom:0!important}.left-0{left:0!important}.ml-1{margin-left:.25rem!important}.block{display:block!important}.flex{display:flex!important}.hidden{display:none!important}.w-full{width:100%!important}.flex-col{flex-direction:column!important}.justify-end{justify-content:flex-end!important}.gap-4{gap:1rem!important}.justify-self-end{justify-self:end!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}.bg-white{--tw-bg-opacity:1!important;background-color:rgb(255 255 255/var(--tw-bg-opacity))!important}.p-4{padding:1rem!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}@media (min-width:64rem){.desktop-xs\:flex{display:flex!important}.desktop-xs\:hidden{display:none!important}.desktop-xs\:w-auto{width:auto!important}.desktop-xs\:flex-row{flex-direction:row!important}}.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}.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}.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}

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

@@ -1,5 +1,5 @@
 import { createPopper } from '@popperjs/core';
-import { Component, Element, h, Host, Listen, Prop } from '@stencil/core';
+import { Component, Element, Event, h, Host, Listen, Prop, } from '@stencil/core';
 export class Tooltip {
   constructor() {
     /**
@@ -11,9 +11,13 @@ export class Tooltip {
      */
     this.popover = null;
     /**
-     * The content of the popover
+     * The placement of the popover
      */
     this.placement = 'top';
+    /**
+     * The strategy of the popover placement
+     */
+    this.strategy = 'fixed';
     /**
      * Wether to show the popover
      */
@@ -26,16 +30,14 @@ export class Tooltip {
   }
   componentShouldUpdate() {
     this._setOptions();
-    if (this._loaded && this.show) {
-      this._show();
-    }
   }
   render() {
     return (h(Host, { class: "p-popover" },
       h("slot", { name: "content" }),
-      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 }))));
+      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 })))));
   }
   clickHandler() {
     if (this.variant === 'hover') {
@@ -44,9 +46,7 @@ export class Tooltip {
     if (this._popover.hasAttribute('data-show')) {
       return;
     }
-    if (!this._popover.hasAttribute('data-show')) {
-      this._show();
-    }
+    this._show();
   }
   documentClickHandler() {
     if (this.variant === 'hover' || !this.canManuallyClose) {
@@ -55,18 +55,16 @@ export class Tooltip {
     if (!this._popover.hasAttribute('data-show')) {
       return;
     }
-    if (this._popover.hasAttribute('data-show')) {
-      this._hide();
-    }
+    this._hide();
   }
   mouseEnterHandler() {
-    if (this.variant === 'click') {
+    if (this.variant !== 'hover') {
       return;
     }
     this._show();
   }
   mouseLeaveHandler() {
-    if (this.show || this.variant === 'click') {
+    if (this.show || this.variant !== 'hover') {
       return;
     }
     this._hide();
@@ -78,9 +76,13 @@ export class Tooltip {
     // 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 }] })));
+    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) {
@@ -89,12 +91,18 @@ export class Tooltip {
     // 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._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);
+      this._popper = createPopper(this._el, popover, {
+        strategy: this.strategy,
+      });
       this._setOptions();
       this._loaded = true;
       if (this.show) {
@@ -107,12 +115,18 @@ export class Tooltip {
       return;
     }
     this._popper.setOptions({
-      placement: this.placement,
+      placement: this.variant === 'error' ? 'top-end' : this.placement,
       modifiers: [
         {
           name: 'offset',
           options: {
-            offset: [0, 8],
+            offset: this.variant === 'error' ? [8, 14] : [0, 8],
+          },
+        },
+        {
+          name: 'arrow',
+          options: {
+            padding: 4,
           },
         },
       ],
@@ -131,8 +145,8 @@ export class Tooltip {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "'hover' | 'click'",
-        "resolved": "\"click\" | \"hover\"",
+        "original": "'hover' | 'click' | 'error'",
+        "resolved": "\"click\" | \"error\" | \"hover\"",
         "references": {}
       },
       "required": false,
@@ -180,12 +194,35 @@ export class Tooltip {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "The content of the popover"
+        "text": "The placement of the popover"
       },
       "attribute": "placement",
       "reflect": false,
       "defaultValue": "'top'"
     },
+    "strategy": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "PositioningStrategy",
+        "resolved": "\"absolute\" | \"fixed\"",
+        "references": {
+          "PositioningStrategy": {
+            "location": "import",
+            "path": "@popperjs/core"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The strategy of the popover placement"
+      },
+      "attribute": "strategy",
+      "reflect": false,
+      "defaultValue": "'fixed'"
+    },
     "show": {
       "type": "boolean",
       "mutable": false,
@@ -223,6 +260,22 @@ export class Tooltip {
       "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",