@swisspost/design-system-components 1.6.3 → 1.7.1

package/dist/collection/components/post-tooltip/post-tooltip.js

@@ -1,345 +1,212 @@
 import { h, Host } from "@stencil/core";
-import { arrow, autoUpdate, computePosition, flip, inline, offset, shift, } from "@floating-ui/dom";
 import isFocusable from "ally.js/esm/is/focusable";
-// Polyfill for popovers, can be removed when https://caniuse.com/?search=popover is green
-import "@oddbird/popover-polyfill";
 // Patch for long press on touch devices
 import "long-press-event";
 import { version } from "../../../package.json";
-import { checkOneOf } from "../../utils";
-import { BACKGROUND_COLOR } from "./types";
-const SIDE_MAP = {
-  top: 'bottom',
-  right: 'left',
-  bottom: 'top',
-  left: 'right',
-};
 export class PostTooltip {
-  validateBackgroundColor(newValue = this.backgroundColor) {
-    checkOneOf(newValue, BACKGROUND_COLOR, `The post-tooltip "background-color" prop should contain one of those values: ${BACKGROUND_COLOR.join(', ')}`);
-    if (newValue === 'yellow') {
-      this.tooltipClasses = 'bg-yellow';
+    constructor() {
+        this.placement = 'top';
+        // Create local versions of event handlers for de-registration
+        // https://stackoverflow.com/questions/33859113/javascript-removeeventlistener-not-working-inside-a-class
+        this.localShowTooltip = e => this.show(e.target);
+        this.localHideTooltip = this.hide.bind(this);
     }
-    else {
-      this.tooltipClasses = 'bg-primary';
+    connectedCallback() {
+        if (!this.host.id) {
+            throw new Error('No id set: <post-tooltip> must have an id, linking it to it\'s target element using the data-tooltip-target attribute.');
+        }
+        if (!this.triggers) {
+            throw new Error(`No trigger found for <post-tooltip id="${this.host.id}">, please add the 'data-tooltip-target="${this.host.id}" attribute to the trigger element.`);
+        }
+        // Patch popovertargetaction="interest" until it's implemented
+        // https://github.com/openui/open-ui/issues/767#issuecomment-1654177227
+        this.triggers.forEach(trigger => this.patchPopoverTargetActionInterest(trigger));
     }
-  }
-  constructor() {
-    this.tooltipClasses = undefined;
-    this.backgroundColor = 'primary';
-    this.placement = 'top';
-    // Create local versions of event handlers for de-registration
-    // https://stackoverflow.com/questions/33859113/javascript-removeeventlistener-not-working-inside-a-class
-    this.localShowTooltip = e => this.show(e.target);
-    this.localHideTooltip = this.hide.bind(this);
-    this.localToggleTooltip = this.toggle.bind(this);
-  }
-  componentWillLoad() {
-    this.validateBackgroundColor();
-    // Append tooltip host to the end of the body to get around overflow: hidden restrictions
-    // for browsers that don't support popover yet
-    document.body.appendChild(this.host);
-  }
-  connectedCallback() {
-    if (!this.host.id) {
-      throw new Error('No id set: <post-tooltip> must have an id, linking it to it\'s target element using the data-tooltip-target attribute.');
+    /**
+     * Remove a bunch of event listeners if the tooltip gets removed from the DOM
+     */
+    disconnectedCallback() {
+        this.triggers.forEach(trigger => {
+            trigger.removeEventListener('mouseenter', this.localShowTooltip);
+            trigger.removeEventListener('mouseleave', this.localHideTooltip);
+            trigger.removeEventListener('focus', this.localShowTooltip);
+            trigger.removeEventListener('blur', this.localHideTooltip);
+            trigger.removeEventListener('long-press', this.localShowTooltip);
+        });
     }
-    if (!this.triggers) {
-      throw new Error(`No trigger found for <post-tooltip id="${this.host.id}">, please add the 'data-tooltip-target="${this.host.id}" attribute to the trigger element.`);
+    componentWillLoad() {
+        // Append tooltip host to the end of the body to get around overflow: hidden restrictions
+        // for browsers that don't support popover yet
+        document.body.appendChild(this.host);
     }
-    // Patch popovertargetaction="interest" until it's implemented
-    // https://github.com/openui/open-ui/issues/767#issuecomment-1654177227
-    this.triggers.forEach(trigger => this.patchPopoverTargetActionInterest(trigger));
-  }
-  /**
-   * Remove a bunch of event listeners if the tooltip gets removed from the DOM
-   */
-  disconnectedCallback() {
-    this.triggers.forEach(trigger => {
-      trigger.removeEventListener('mouseenter', this.localShowTooltip);
-      trigger.removeEventListener('mouseleave', this.localHideTooltip);
-      trigger.removeEventListener('focus', this.localShowTooltip);
-      trigger.removeEventListener('blur', this.localHideTooltip);
-      trigger.removeEventListener('long-press', this.localShowTooltip);
-    });
-    if (this.tooltipRef)
-      this.tooltipRef.removeEventListener('beforetoggle', this.localToggleTooltip);
-    if (typeof this.clearAutoUpdate === 'function')
-      this.clearAutoUpdate();
-  }
-  componentDidLoad() {
-    // Has the benefit of rendering the tooltip without the popover attribute which
-    // causes the tooltip to show up on the page if it's not linked to a target. This makes
-    // the error obvious.
-    if (!this.host.id || !this.triggers)
-      return false;
-    this.tooltipRef.setAttribute('popover', '');
-    this.tooltipRef.addEventListener('beforetoggle', this.handleToggle.bind(this));
-  }
-  /**
-   * Programmatically display the tooltip
-   * @param target An element with [data-tooltip-target="id"] where the tooltip should be shown
-   */
-  async show(target) {
-    this.eventTarget = target;
-    this.tooltipRef.showPopover();
-  }
-  /**
-   * Programmatically hide this tooltip
-   */
-  async hide() {
-    this.eventTarget = null;
-    this.tooltipRef.hidePopover();
-  }
-  /**
-   * Toggle tooltip display
-   * @param target An element with [data-tooltip-target="id"] where the tooltip should be shown
-   * @param force Pass true to always show or false to always hide
-   */
-  async toggle(target, force) {
-    this.eventTarget = target;
-    this.tooltipRef.togglePopover(force);
-  }
-  get triggers() {
-    return document.querySelectorAll(`[data-tooltip-target="${this.host.id}"]`);
-  }
-  patchPopoverTargetActionInterest(trigger) {
-    trigger.addEventListener('mouseenter', this.localShowTooltip);
-    trigger.addEventListener('mouseleave', this.localHideTooltip);
-    trigger.addEventListener('focus', this.localShowTooltip);
-    trigger.addEventListener('blur', this.localHideTooltip);
-    trigger.addEventListener('long-press', this.localShowTooltip);
-    // Patch missing aria-describedby attribute on the trigger without overriding existing values
-    const describedBy = trigger.getAttribute('aria-describedby');
-    if (!(describedBy === null || describedBy === void 0 ? void 0 : describedBy.includes(this.host.id))) {
-      const newDescribedBy = describedBy ? `${describedBy} ${this.host.id}` : this.host.id;
-      trigger.setAttribute('aria-describedby', newDescribedBy);
+    /**
+     * Programmatically display the tooltip
+     * @param target An element with [data-tooltip-target="id"] where the tooltip should be shown
+     */
+    async show(target) {
+        this.popoverRef.show(target);
     }
-    // Patch missing focus ability on the trigger element
-    if (!isFocusable(trigger)) {
-      trigger.setAttribute('tabindex', '0');
+    /**
+     * Programmatically hide this tooltip
+     */
+    async hide() {
+        this.popoverRef.hide();
     }
-  }
-  /**
-   * Start or stop auto updates based on tooltip events.
-   * Tooltips can be closed or opened with other methods than class members,
-   * therefore listening to the toggle event is safer for cleaning up.
-   * @param e ToggleEvent
-   */
-  handleToggle(e) {
-    const isOpen = e.newState === 'open';
-    if (isOpen) {
-      this.startAutoupdates();
+    /**
+     * Toggle tooltip display
+     * @param target An element with [data-tooltip-target="id"] where the tooltip should be shown
+     * @param force Pass true to always show or false to always hide
+     */
+    async toggle(target, force) {
+        this.popoverRef.toggle(target, force);
     }
-    else {
-      if (typeof this.clearAutoUpdate === 'function')
-        this.clearAutoUpdate();
+    get triggers() {
+        return document.querySelectorAll(`[data-tooltip-target="${this.host.id}"]`);
     }
-  }
-  /**
-   * Start listening for DOM updates, scroll events etc. that have
-   * an influence on tooltip positioning
-   */
-  startAutoupdates() {
-    this.clearAutoUpdate = autoUpdate(this.eventTarget, this.tooltipRef, this.positionTooltip.bind(this));
-  }
-  // Tooltip and arrow positioning with floating-ui
-  // Docs: https://floating-ui.com/docs/computePosition
-  async positionTooltip() {
-    const { x, y, middlewareData, placement: currentPlacement, } = await computePosition(this.eventTarget, this.tooltipRef, {
-      placement: this.placement || 'top',
-      middleware: [
-        flip(),
-        inline(),
-        shift({ padding: 8 }),
-        offset(12),
-        arrow({ element: this.arrowRef, padding: 8 }),
-      ],
-    });
-    // Tooltip
-    this.tooltipRef.style.left = `${x}px`;
-    this.tooltipRef.style.top = `${y}px`;
-    // Arrow
-    // Tutorial: https://codesandbox.io/s/mystifying-kare-ee3hmh?file=/src/index.js
-    const side = currentPlacement.split('-')[0];
-    const { x: arrowX, y: arrowY } = middlewareData.arrow;
-    const staticSide = SIDE_MAP[side];
-    Object.assign(this.arrowRef.style, {
-      top: arrowY ? `${arrowY}px` : '',
-      left: arrowX ? `${arrowX}px` : '',
-      [staticSide]: `${-this.arrowRef.offsetWidth / 2}px`,
-    });
-  }
-  render() {
-    return (h(Host, { "data-version": version }, h("div", { role: "tooltip", tabindex: "-1", class: this.tooltipClasses, ref: (el) => (this.tooltipRef = el) }, h("span", { class: "arrow", ref: el => {
-        this.arrowRef = el;
-      } }), h("slot", null))));
-  }
-  static get is() { return "post-tooltip"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["post-tooltip.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["post-tooltip.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "backgroundColor": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "BackgroundColor",
-          "resolved": "\"primary\" | \"yellow\"",
-          "references": {
-            "BackgroundColor": {
-              "location": "import",
-              "path": "./types",
-              "id": "src/components/post-tooltip/types.ts::BackgroundColor"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Defines the background color of the tooltip.\nChoose the one that provides the best contrast in your scenario."
-        },
-        "attribute": "background-color",
-        "reflect": false,
-        "defaultValue": "'primary'"
-      },
-      "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/.pnpm/@floating-ui+dom@1.5.3/node_modules/@floating-ui/dom/src/types.d.ts::Placement"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Defines the placement of the tooltip according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement.\nTooltips are automatically flipped to the opposite side if there is not enough available space and are shifted\ntowards the viewport if they would overlap edge boundaries."
-        },
-        "attribute": "placement",
-        "reflect": false,
-        "defaultValue": "'top'"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "tooltipClasses": {}
-    };
-  }
-  static get methods() {
-    return {
-      "show": {
-        "complexType": {
-          "signature": "(target: HTMLElement) => Promise<void>",
-          "parameters": [{
-              "tags": [{
-                  "name": "param",
-                  "text": "target An element with [data-tooltip-target=\"id\"] where the tooltip should be shown"
-                }],
-              "text": "An element with [data-tooltip-target=\"id\"] where the tooltip should be shown"
-            }],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
-            },
-            "HTMLElement": {
-              "location": "global",
-              "id": "global::HTMLElement"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Programmatically display the tooltip",
-          "tags": [{
-              "name": "param",
-              "text": "target An element with [data-tooltip-target=\"id\"] where the tooltip should be shown"
-            }]
+    patchPopoverTargetActionInterest(trigger) {
+        trigger.addEventListener('mouseenter', this.localShowTooltip);
+        trigger.addEventListener('mouseleave', this.localHideTooltip);
+        trigger.addEventListener('focus', this.localShowTooltip);
+        trigger.addEventListener('blur', this.localHideTooltip);
+        trigger.addEventListener('long-press', this.localShowTooltip);
+        // Patch missing aria-describedby attribute on the trigger without overriding existing values
+        const describedBy = trigger.getAttribute('aria-describedby');
+        if (!(describedBy === null || describedBy === void 0 ? void 0 : describedBy.includes(this.host.id))) {
+            const newDescribedBy = describedBy ? `${describedBy} ${this.host.id}` : this.host.id;
+            trigger.setAttribute('aria-describedby', newDescribedBy);
         }
-      },
-      "hide": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Programmatically hide this tooltip",
-          "tags": []
+        // Patch missing focus ability on the trigger element
+        if (!isFocusable(trigger)) {
+            trigger.setAttribute('tabindex', '0');
         }
-      },
-      "toggle": {
-        "complexType": {
-          "signature": "(target: HTMLElement, force?: boolean) => Promise<void>",
-          "parameters": [{
-              "tags": [{
-                  "name": "param",
-                  "text": "target An element with [data-tooltip-target=\"id\"] where the tooltip should be shown"
-                }],
-              "text": "An element with [data-tooltip-target=\"id\"] where the tooltip should be shown"
-            }, {
-              "tags": [{
-                  "name": "param",
-                  "text": "force Pass true to always show or false to always hide"
-                }],
-              "text": "Pass true to always show or false to always hide"
-            }],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
+    }
+    render() {
+        return (h(Host, { "data-version": version }, h("post-popovercontainer", { role: "tooltip", tabindex: "-1", arrow: true, placement: this.placement, ref: (el) => (this.popoverRef = el) }, h("slot", null))));
+    }
+    static get is() { return "post-tooltip"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["post-tooltip.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["post-tooltip.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "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/.pnpm/@floating-ui+dom@1.5.4/node_modules/@floating-ui/dom/dist/floating-ui.dom.d.ts::Placement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the placement of the tooltip according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement.\nTooltips are automatically flipped to the opposite side if there is not enough available space and are shifted\ntowards the viewport if they would overlap edge boundaries."
+                },
+                "attribute": "placement",
+                "reflect": false,
+                "defaultValue": "'top'"
+            }
+        };
+    }
+    static get methods() {
+        return {
+            "show": {
+                "complexType": {
+                    "signature": "(target: HTMLElement) => Promise<void>",
+                    "parameters": [{
+                            "name": "target",
+                            "type": "HTMLElement",
+                            "docs": "An element with [data-tooltip-target=\"id\"] where the tooltip should be shown"
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Programmatically display the tooltip",
+                    "tags": [{
+                            "name": "param",
+                            "text": "target An element with [data-tooltip-target=\"id\"] where the tooltip should be shown"
+                        }]
+                }
+            },
+            "hide": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Programmatically hide this tooltip",
+                    "tags": []
+                }
             },
-            "HTMLElement": {
-              "location": "global",
-              "id": "global::HTMLElement"
+            "toggle": {
+                "complexType": {
+                    "signature": "(target: HTMLElement, force?: boolean) => Promise<void>",
+                    "parameters": [{
+                            "name": "target",
+                            "type": "HTMLElement",
+                            "docs": "An element with [data-tooltip-target=\"id\"] where the tooltip should be shown"
+                        }, {
+                            "name": "force",
+                            "type": "boolean",
+                            "docs": "Pass true to always show or false to always hide"
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Toggle tooltip display",
+                    "tags": [{
+                            "name": "param",
+                            "text": "target An element with [data-tooltip-target=\"id\"] where the tooltip should be shown"
+                        }, {
+                            "name": "param",
+                            "text": "force Pass true to always show or false to always hide"
+                        }]
+                }
             }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Toggle tooltip display",
-          "tags": [{
-              "name": "param",
-              "text": "target An element with [data-tooltip-target=\"id\"] where the tooltip should be shown"
-            }, {
-              "name": "param",
-              "text": "force Pass true to always show or false to always hide"
-            }]
-        }
-      }
-    };
-  }
-  static get elementRef() { return "host"; }
-  static get watchers() {
-    return [{
-        "propName": "backgroundColor",
-        "methodName": "validateBackgroundColor"
-      }];
-  }
+        };
+    }
+    static get elementRef() { return "host"; }
 }
 //# sourceMappingURL=post-tooltip.js.map

package/dist/collection/components/post-tooltip/post-tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"post-tooltip.js","sourceRoot":"","sources":["../../../../src/components/post-tooltip/post-tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACxF,OAAO,EACL,KAAK,EACL,UAAU,EACV,eAAe,EACf,IAAI,EACJ,MAAM,EACN,MAAM,EAEN,KAAK,GACN,MAAM,kBAAkB,CAAC;AAC1B,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAEnD,0FAA0F;AAC1F,OAAO,2BAA2B,CAAC;AAEnC,wCAAwC;AACxC,OAAO,kBAAkB,CAAC;AAE1B,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,EAAE,gBAAgB,EAAmB,MAAM,SAAS,CAAC;AAE5D,MAAM,QAAQ,GAAG;EACf,GAAG,EAAE,QAAQ;EACb,KAAK,EAAE,MAAM;EACb,MAAM,EAAE,KAAK;EACb,IAAI,EAAE,OAAO;CACd,CAAC;AAaF,MAAM,OAAO,WAAW;EA2BtB,uBAAuB,CAAC,QAAQ,GAAG,IAAI,CAAC,eAAe;IACrD,UAAU,CACR,QAAQ,EACR,gBAAgB,EAChB,gFAAgF,gBAAgB,CAAC,IAAI,CACnG,IAAI,CACL,EAAE,CACJ,CAAC;IAEF,IAAI,QAAQ,KAAK,QAAQ,EAAE;MACzB,IAAI,CAAC,cAAc,GAAG,WAAW,CAAC;KACnC;SAAM;MACL,IAAI,CAAC,cAAc,GAAG,YAAY,CAAC;KACpC;EACH,CAAC;EAED;;2BA1BqD,SAAS;qBAOrB,KAAK;IAoB5C,8DAA8D;IAC9D,yGAAyG;IACzG,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAqB,CAAC,CAAC;IAChE,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC7C,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GAClD;EAED,iBAAiB;IACf,IAAI,CAAC,uBAAuB,EAAE,CAAC;IAE/B,yFAAyF;IACzF,8CAA8C;IAC9C,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;EACvC,CAAC;EAED,iBAAiB;IACf,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,EAAE;MACjB,MAAM,IAAI,KAAK,CACb,wHAAwH,CACzH,CAAC;KACH;IAED,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAClB,MAAM,IAAI,KAAK,CACb,0CAA0C,IAAI,CAAC,IAAI,CAAC,EAAE,4CAA4C,IAAI,CAAC,IAAI,CAAC,EAAE,qCAAqC,CACpJ,CAAC;KACH;IAED,8DAA8D;IAC9D,uEAAuE;IACvE,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC,IAAI,CAAC,gCAAgC,CAAC,OAAO,CAAC,CAAC,CAAC;EACnF,CAAC;EAED;;KAEG;EACH,oBAAoB;IAClB,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE;MAC9B,OAAO,CAAC,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;MACjE,OAAO,CAAC,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;MACjE,OAAO,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;MAC5D,OAAO,CAAC,mBAAmB,CAAC,MAAM,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;MAC3D,OAAO,CAAC,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;IACnE,CAAC,CAAC,CAAC;IACH,IAAI,IAAI,CAAC,UAAU;MACjB,IAAI,CAAC,UAAU,CAAC,mBAAmB,CAAC,cAAc,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;IAC/E,IAAI,OAAO,IAAI,CAAC,eAAe,KAAK,UAAU;MAAE,IAAI,CAAC,eAAe,EAAE,CAAC;EACzE,CAAC;EAED,gBAAgB;IACd,+EAA+E;IAC/E,uFAAuF;IACvF,qBAAqB;IACrB,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,QAAQ;MAAE,OAAO,KAAK,CAAC;IAElD,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;IAC5C,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,cAAc,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;EACjF,CAAC;EAED;;;KAGG;EAEH,KAAK,CAAC,IAAI,CAAC,MAAmB;IAC5B,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC;IAC1B,IAAI,CAAC,UAAU,CAAC,WAAW,EAAE,CAAC;EAChC,CAAC;EAED;;KAEG;EAEH,KAAK,CAAC,IAAI;IACR,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;IACxB,IAAI,CAAC,UAAU,CAAC,WAAW,EAAE,CAAC;EAChC,CAAC;EAED;;;;KAIG;EAEH,KAAK,CAAC,MAAM,CAAC,MAAmB,EAAE,KAAe;IAC/C,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC;IAC1B,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;EACvC,CAAC;EAED,IAAY,QAAQ;IAClB,OAAO,QAAQ,CAAC,gBAAgB,CAAC,yBAAyB,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,CAAC;EAC9E,CAAC;EAEO,gCAAgC,CAAC,OAAgB;IACvD,OAAO,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;IAC9D,OAAO,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;IAC9D,OAAO,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;IACzD,OAAO,CAAC,gBAAgB,CAAC,MAAM,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;IACxD,OAAO,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;IAE9D,6FAA6F;IAC7F,MAAM,WAAW,GAAG,OAAO,CAAC,YAAY,CAAC,kBAAkB,CAAC,CAAC;IAC7D,IAAI,CAAC,CAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA,EAAE;MACxC,MAAM,cAAc,GAAG,WAAW,CAAC,CAAC,CAAC,GAAG,WAAW,IAAI,IAAI,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC;MACrF,OAAO,CAAC,YAAY,CAAC,kBAAkB,EAAE,cAAc,CAAC,CAAC;KAC1D;IAED,qDAAqD;IACrD,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,EAAE;MACzB,OAAO,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;KACvC;EACH,CAAC;EAED;;;;;KAKG;EACK,YAAY,CAAC,CAAc;IACjC,MAAM,MAAM,GAAG,CAAC,CAAC,QAAQ,KAAK,MAAM,CAAC;IACrC,IAAI,MAAM,EAAE;MACV,IAAI,CAAC,gBAAgB,EAAE,CAAC;KACzB;SAAM;MACL,IAAI,OAAO,IAAI,CAAC,eAAe,KAAK,UAAU;QAAE,IAAI,CAAC,eAAe,EAAE,CAAC;KACxE;EACH,CAAC;EAED;;;KAGG;EACK,gBAAgB;IACtB,IAAI,CAAC,eAAe,GAAG,UAAU,CAC/B,IAAI,CAAC,WAAW,EAChB,IAAI,CAAC,UAAU,EACf,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAChC,CAAC;EACJ,CAAC;EAED,iDAAiD;EACjD,qDAAqD;EAC7C,KAAK,CAAC,eAAe;IAC3B,MAAM,EACJ,CAAC,EACD,CAAC,EACD,cAAc,EACd,SAAS,EAAE,gBAAgB,GAC5B,GAAG,MAAM,eAAe,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,UAAU,EAAE;MAC3D,SAAS,EAAE,IAAI,CAAC,SAAS,IAAI,KAAK;MAClC,UAAU,EAAE;QACV,IAAI,EAAE;QACN,MAAM,EAAE;QACR,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC;QACrB,MAAM,CAAC,EAAE,CAAC;QACV,KAAK,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,QAAQ,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC;OAC9C;KACF,CAAC,CAAC;IAEH,UAAU;IACV,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,CAAC,IAAI,CAAC;IACtC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,GAAG,GAAG,GAAG,CAAC,IAAI,CAAC;IAErC,QAAQ;IACR,+EAA+E;IAC/E,MAAM,IAAI,GAAG,gBAAgB,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;IAC5C,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,GAAG,cAAc,CAAC,KAAK,CAAC;IACtD,MAAM,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAElC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE;MACjC,GAAG,EAAE,MAAM,CAAC,CAAC,CAAC,GAAG,MAAM,IAAI,CAAC,CAAC,CAAC,EAAE;MAChC,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,GAAG,MAAM,IAAI,CAAC,CAAC,CAAC,EAAE;MACjC,CAAC,UAAU,CAAC,EAAE,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,WAAW,GAAG,CAAC,IAAI;KACpD,CAAC,CAAC;EACL,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,oBAAe,OAAO;MACzB,WACE,IAAI,EAAC,SAAS,EACd,QAAQ,EAAC,IAAI,EACb,KAAK,EAAE,IAAI,CAAC,cAAc,EAC1B,GAAG,EAAE,CAAC,EAAmC,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC;QAEpE,YACE,KAAK,EAAC,OAAO,EACb,GAAG,EAAE,EAAE,CAAC,EAAE;YACR,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC;UACrB,CAAC,GACK;QACR,eAAa,CACT,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Host, Method, Prop, State, Watch } from '@stencil/core';\nimport {\n  arrow,\n  autoUpdate,\n  computePosition,\n  flip,\n  inline,\n  offset,\n  Placement,\n  shift,\n} from '@floating-ui/dom';\nimport isFocusable from 'ally.js/esm/is/focusable';\n\n// Polyfill for popovers, can be removed when https://caniuse.com/?search=popover is green\nimport '@oddbird/popover-polyfill';\n\n// Patch for long press on touch devices\nimport 'long-press-event';\n\nimport { version } from '../../../package.json';\nimport { checkOneOf } from '../../utils';\nimport { BACKGROUND_COLOR, BackgroundColor } from './types';\n\nconst SIDE_MAP = {\n  top: 'bottom',\n  right: 'left',\n  bottom: 'top',\n  left: 'right',\n};\n\ninterface PopoverElement {\n  showPopover: () => void;\n  hidePopover: () => void;\n  togglePopover: (force?: boolean) => boolean;\n}\n\n@Component({\n  tag: 'post-tooltip',\n  styleUrl: 'post-tooltip.scss',\n  shadow: true,\n})\nexport class PostTooltip {\n  private tooltipRef: HTMLDivElement & PopoverElement;\n  private arrowRef: HTMLElement;\n  private clearAutoUpdate: () => void;\n  private readonly localShowTooltip: (e: Event) => Promise<void>;\n  private readonly localHideTooltip: () => Promise<void>;\n  private readonly localToggleTooltip: () => Promise<void>;\n  private eventTarget: Element;\n\n  @Element() host: HTMLPostTooltipElement;\n\n  @State() tooltipClasses: string;\n\n  /**\n   * Defines the background color of the tooltip.\n   * Choose the one that provides the best contrast in your scenario.\n   */\n  @Prop() readonly backgroundColor?: BackgroundColor = 'primary';\n\n  /**\n   * Defines the placement of the tooltip according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement.\n   * Tooltips are automatically flipped to the opposite side if there is not enough available space and are shifted\n   * towards the viewport if they would overlap edge boundaries.\n   */\n  @Prop() readonly placement?: Placement = 'top';\n\n  @Watch('backgroundColor')\n  validateBackgroundColor(newValue = this.backgroundColor) {\n    checkOneOf(\n      newValue,\n      BACKGROUND_COLOR,\n      `The post-tooltip \"background-color\" prop should contain one of those values: ${BACKGROUND_COLOR.join(\n        ', ',\n      )}`,\n    );\n\n    if (newValue === 'yellow') {\n      this.tooltipClasses = 'bg-yellow';\n    } else {\n      this.tooltipClasses = 'bg-primary';\n    }\n  }\n\n  constructor() {\n    // Create local versions of event handlers for de-registration\n    // https://stackoverflow.com/questions/33859113/javascript-removeeventlistener-not-working-inside-a-class\n    this.localShowTooltip = e => this.show(e.target as HTMLElement);\n    this.localHideTooltip = this.hide.bind(this);\n    this.localToggleTooltip = this.toggle.bind(this);\n  }\n\n  componentWillLoad() {\n    this.validateBackgroundColor();\n\n    // Append tooltip host to the end of the body to get around overflow: hidden restrictions\n    // for browsers that don't support popover yet\n    document.body.appendChild(this.host);\n  }\n\n  connectedCallback() {\n    if (!this.host.id) {\n      throw new Error(\n        'No id set: <post-tooltip> must have an id, linking it to it\\'s target element using the data-tooltip-target attribute.',\n      );\n    }\n\n    if (!this.triggers) {\n      throw new Error(\n        `No trigger found for <post-tooltip id=\"${this.host.id}\">, please add the 'data-tooltip-target=\"${this.host.id}\" attribute to the trigger element.`,\n      );\n    }\n\n    // Patch popovertargetaction=\"interest\" until it's implemented\n    // https://github.com/openui/open-ui/issues/767#issuecomment-1654177227\n    this.triggers.forEach(trigger => this.patchPopoverTargetActionInterest(trigger));\n  }\n\n  /**\n   * Remove a bunch of event listeners if the tooltip gets removed from the DOM\n   */\n  disconnectedCallback() {\n    this.triggers.forEach(trigger => {\n      trigger.removeEventListener('mouseenter', this.localShowTooltip);\n      trigger.removeEventListener('mouseleave', this.localHideTooltip);\n      trigger.removeEventListener('focus', this.localShowTooltip);\n      trigger.removeEventListener('blur', this.localHideTooltip);\n      trigger.removeEventListener('long-press', this.localShowTooltip);\n    });\n    if (this.tooltipRef)\n      this.tooltipRef.removeEventListener('beforetoggle', this.localToggleTooltip);\n    if (typeof this.clearAutoUpdate === 'function') this.clearAutoUpdate();\n  }\n\n  componentDidLoad() {\n    // Has the benefit of rendering the tooltip without the popover attribute which\n    // causes the tooltip to show up on the page if it's not linked to a target. This makes\n    // the error obvious.\n    if (!this.host.id || !this.triggers) return false;\n\n    this.tooltipRef.setAttribute('popover', '');\n    this.tooltipRef.addEventListener('beforetoggle', this.handleToggle.bind(this));\n  }\n\n  /**\n   * Programmatically display the tooltip\n   * @param target An element with [data-tooltip-target=\"id\"] where the tooltip should be shown\n   */\n  @Method()\n  async show(target: HTMLElement) {\n    this.eventTarget = target;\n    this.tooltipRef.showPopover();\n  }\n\n  /**\n   * Programmatically hide this tooltip\n   */\n  @Method()\n  async hide() {\n    this.eventTarget = null;\n    this.tooltipRef.hidePopover();\n  }\n\n  /**\n   * Toggle tooltip display\n   * @param target An element with [data-tooltip-target=\"id\"] where the tooltip should be shown\n   * @param force Pass true to always show or false to always hide\n   */\n  @Method()\n  async toggle(target: HTMLElement, force?: boolean) {\n    this.eventTarget = target;\n    this.tooltipRef.togglePopover(force);\n  }\n\n  private get triggers() {\n    return document.querySelectorAll(`[data-tooltip-target=\"${this.host.id}\"]`);\n  }\n\n  private patchPopoverTargetActionInterest(trigger: Element) {\n    trigger.addEventListener('mouseenter', this.localShowTooltip);\n    trigger.addEventListener('mouseleave', this.localHideTooltip);\n    trigger.addEventListener('focus', this.localShowTooltip);\n    trigger.addEventListener('blur', this.localHideTooltip);\n    trigger.addEventListener('long-press', this.localShowTooltip);\n\n    // Patch missing aria-describedby attribute on the trigger without overriding existing values\n    const describedBy = trigger.getAttribute('aria-describedby');\n    if (!describedBy?.includes(this.host.id)) {\n      const newDescribedBy = describedBy ? `${describedBy} ${this.host.id}` : this.host.id;\n      trigger.setAttribute('aria-describedby', newDescribedBy);\n    }\n\n    // Patch missing focus ability on the trigger element\n    if (!isFocusable(trigger)) {\n      trigger.setAttribute('tabindex', '0');\n    }\n  }\n\n  /**\n   * Start or stop auto updates based on tooltip events.\n   * Tooltips can be closed or opened with other methods than class members,\n   * therefore listening to the toggle event is safer for cleaning up.\n   * @param e ToggleEvent\n   */\n  private handleToggle(e: ToggleEvent) {\n    const isOpen = e.newState === 'open';\n    if (isOpen) {\n      this.startAutoupdates();\n    } else {\n      if (typeof this.clearAutoUpdate === 'function') this.clearAutoUpdate();\n    }\n  }\n\n  /**\n   * Start listening for DOM updates, scroll events etc. that have\n   * an influence on tooltip positioning\n   */\n  private startAutoupdates() {\n    this.clearAutoUpdate = autoUpdate(\n      this.eventTarget,\n      this.tooltipRef,\n      this.positionTooltip.bind(this),\n    );\n  }\n\n  // Tooltip and arrow positioning with floating-ui\n  // Docs: https://floating-ui.com/docs/computePosition\n  private async positionTooltip() {\n    const {\n      x,\n      y,\n      middlewareData,\n      placement: currentPlacement,\n    } = await computePosition(this.eventTarget, this.tooltipRef, {\n      placement: this.placement || 'top',\n      middleware: [\n        flip(),\n        inline(),\n        shift({ padding: 8 }),\n        offset(12), // 4px outside of element to account for focus outline + ~arrow size\n        arrow({ element: this.arrowRef, padding: 8 }),\n      ],\n    });\n\n    // Tooltip\n    this.tooltipRef.style.left = `${x}px`;\n    this.tooltipRef.style.top = `${y}px`;\n\n    // Arrow\n    // Tutorial: https://codesandbox.io/s/mystifying-kare-ee3hmh?file=/src/index.js\n    const side = currentPlacement.split('-')[0];\n    const { x: arrowX, y: arrowY } = middlewareData.arrow;\n    const staticSide = SIDE_MAP[side];\n\n    Object.assign(this.arrowRef.style, {\n      top: arrowY ? `${arrowY}px` : '',\n      left: arrowX ? `${arrowX}px` : '',\n      [staticSide]: `${-this.arrowRef.offsetWidth / 2}px`,\n    });\n  }\n\n  render() {\n    return (\n      <Host data-version={version}>\n        <div\n          role=\"tooltip\"\n          tabindex=\"-1\"\n          class={this.tooltipClasses}\n          ref={(el: HTMLDivElement & PopoverElement) => (this.tooltipRef = el)}\n        >\n          <span\n            class=\"arrow\"\n            ref={el => {\n              this.arrowRef = el;\n            }}\n          ></span>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"post-tooltip.js","sourceRoot":"","sources":["../../../../src/components/post-tooltip/post-tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Host, Method, Prop } from '@stencil/core';\nimport { Placement } from '@floating-ui/dom';\nimport isFocusable from 'ally.js/esm/is/focusable';\n\n// Patch for long press on touch devices\nimport 'long-press-event';\n\nimport { version } from '../../../package.json';\n@Component({\n  tag: 'post-tooltip',\n  styleUrl: 'post-tooltip.scss',\n  shadow: true,\n})\nexport class PostTooltip {\n  private popoverRef: HTMLPostPopovercontainerElement;\n  private readonly localShowTooltip: (e: Event) => Promise<void>;\n  private readonly localHideTooltip: () => Promise<void>;\n\n  @Element() host: HTMLPostTooltipElement;\n\n  /**\n   * Defines the placement of the tooltip according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement.\n   * Tooltips are automatically flipped to the opposite side if there is not enough available space and are shifted\n   * towards the viewport if they would overlap edge boundaries.\n   */\n  @Prop() readonly placement?: Placement = 'top';\n\n  constructor() {\n    // Create local versions of event handlers for de-registration\n    // https://stackoverflow.com/questions/33859113/javascript-removeeventlistener-not-working-inside-a-class\n    this.localShowTooltip = e => this.show(e.target as HTMLElement);\n    this.localHideTooltip = this.hide.bind(this);\n  }\n\n  connectedCallback() {\n    if (!this.host.id) {\n      throw new Error(\n        'No id set: <post-tooltip> must have an id, linking it to it\\'s target element using the data-tooltip-target attribute.',\n      );\n    }\n\n    if (!this.triggers) {\n      throw new Error(\n        `No trigger found for <post-tooltip id=\"${this.host.id}\">, please add the 'data-tooltip-target=\"${this.host.id}\" attribute to the trigger element.`,\n      );\n    }\n\n    // Patch popovertargetaction=\"interest\" until it's implemented\n    // https://github.com/openui/open-ui/issues/767#issuecomment-1654177227\n    this.triggers.forEach(trigger => this.patchPopoverTargetActionInterest(trigger));\n  }\n\n  /**\n   * Remove a bunch of event listeners if the tooltip gets removed from the DOM\n   */\n  disconnectedCallback() {\n    this.triggers.forEach(trigger => {\n      trigger.removeEventListener('mouseenter', this.localShowTooltip);\n      trigger.removeEventListener('mouseleave', this.localHideTooltip);\n      trigger.removeEventListener('focus', this.localShowTooltip);\n      trigger.removeEventListener('blur', this.localHideTooltip);\n      trigger.removeEventListener('long-press', this.localShowTooltip);\n    });\n  }\n\n  componentWillLoad() {\n    // Append tooltip host to the end of the body to get around overflow: hidden restrictions\n    // for browsers that don't support popover yet\n    document.body.appendChild(this.host);\n  }\n\n  /**\n   * Programmatically display the tooltip\n   * @param target An element with [data-tooltip-target=\"id\"] where the tooltip should be shown\n   */\n  @Method()\n  async show(target: HTMLElement) {\n    this.popoverRef.show(target);\n  }\n\n  /**\n   * Programmatically hide this tooltip\n   */\n  @Method()\n  async hide() {\n    this.popoverRef.hide();\n  }\n\n  /**\n   * Toggle tooltip display\n   * @param target An element with [data-tooltip-target=\"id\"] where the tooltip should be shown\n   * @param force Pass true to always show or false to always hide\n   */\n  @Method()\n  async toggle(target: HTMLElement, force?: boolean) {\n    this.popoverRef.toggle(target, force);\n  }\n\n  private get triggers() {\n    return document.querySelectorAll(`[data-tooltip-target=\"${this.host.id}\"]`);\n  }\n\n  private patchPopoverTargetActionInterest(trigger: Element) {\n    trigger.addEventListener('mouseenter', this.localShowTooltip);\n    trigger.addEventListener('mouseleave', this.localHideTooltip);\n    trigger.addEventListener('focus', this.localShowTooltip);\n    trigger.addEventListener('blur', this.localHideTooltip);\n    trigger.addEventListener('long-press', this.localShowTooltip);\n\n    // Patch missing aria-describedby attribute on the trigger without overriding existing values\n    const describedBy = trigger.getAttribute('aria-describedby');\n    if (!describedBy?.includes(this.host.id)) {\n      const newDescribedBy = describedBy ? `${describedBy} ${this.host.id}` : this.host.id;\n      trigger.setAttribute('aria-describedby', newDescribedBy);\n    }\n\n    // Patch missing focus ability on the trigger element\n    if (!isFocusable(trigger)) {\n      trigger.setAttribute('tabindex', '0');\n    }\n  }\n\n  render() {\n    return (\n      <Host data-version={version}>\n        <post-popovercontainer\n          role=\"tooltip\"\n          tabindex=\"-1\"\n          arrow\n          placement={this.placement}\n          ref={(el: HTMLPostPopovercontainerElement) => (this.popoverRef = el)}\n        >\n          <slot></slot>\n        </post-popovercontainer>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/index.js

@@ -1,7 +1,10 @@
 // Export every single component so it gets included in the dist output
+export { PostAccordion } from './components/post-accordion/post-accordion';
 export { PostAlert } from './components/post-alert/post-alert';
 export { PostCollapsible } from './components/post-collapsible/post-collapsible';
 export { PostIcon } from './components/post-icon/post-icon';
+export { PostPopover } from './components/post-popover/post-popover';
+export { PostPopovercontainer } from './components/post-popovercontainer/post-popovercontainer';
 export { PostTabs } from './components/post-tabs/post-tabs';
 export { PostTabHeader } from './components/post-tab-header/post-tab-header';
 export { PostTabPanel } from './components/post-tab-panel/post-tab-panel';

package/dist/collection/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAEA,uEAAuE;AACvE,OAAO,EAAE,SAAS,EAAE,MAAM,oCAAoC,CAAC;AAC/D,OAAO,EAAE,eAAe,EAAE,MAAM,gDAAgD,CAAC;AACjF,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,8CAA8C,CAAC;AAC7E,OAAO,EAAE,YAAY,EAAE,MAAM,4CAA4C,CAAC;AAC1E,OAAO,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC","sourcesContent":["export { Components, JSX } from './components';\n\n// Export every single component so it gets included in the dist output\nexport { PostAlert } from './components/post-alert/post-alert';\nexport { PostCollapsible } from './components/post-collapsible/post-collapsible';\nexport { PostIcon } from './components/post-icon/post-icon';\nexport { PostTabs } from './components/post-tabs/post-tabs';\nexport { PostTabHeader } from './components/post-tab-header/post-tab-header';\nexport { PostTabPanel } from './components/post-tab-panel/post-tab-panel';\nexport { PostTooltip } from './components/post-tooltip/post-tooltip';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAEA,uEAAuE;AACvE,OAAO,EAAE,aAAa,EAAE,MAAM,4CAA4C,CAAC;AAC3E,OAAO,EAAE,SAAS,EAAE,MAAM,oCAAoC,CAAC;AAC/D,OAAO,EAAE,eAAe,EAAE,MAAM,gDAAgD,CAAC;AACjF,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AACrE,OAAO,EAAE,oBAAoB,EAAE,MAAM,0DAA0D,CAAC;AAChG,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,8CAA8C,CAAC;AAC7E,OAAO,EAAE,YAAY,EAAE,MAAM,4CAA4C,CAAC;AAC1E,OAAO,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC","sourcesContent":["export { Components, JSX } from './components';\n\n// Export every single component so it gets included in the dist output\nexport { PostAccordion } from './components/post-accordion/post-accordion';\nexport { PostAlert } from './components/post-alert/post-alert';\nexport { PostCollapsible } from './components/post-collapsible/post-collapsible';\nexport { PostIcon } from './components/post-icon/post-icon';\nexport { PostPopover } from './components/post-popover/post-popover';\nexport { PostPopovercontainer } from './components/post-popovercontainer/post-popovercontainer';\nexport { PostTabs } from './components/post-tabs/post-tabs';\nexport { PostTabHeader } from './components/post-tab-header/post-tab-header';\nexport { PostTabPanel } from './components/post-tab-panel/post-tab-panel';\nexport { PostTooltip } from './components/post-tooltip/post-tooltip';\n"]}

package/dist/collection/utils/is-motion-reduced.js

@@ -1,4 +1,4 @@
 export function isMotionReduced() {
-  return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
 }
 //# sourceMappingURL=is-motion-reduced.js.map

package/dist/collection/utils/is-motion-reduced.js.map

@@ -1 +1 @@
-{"version":3,"file":"is-motion-reduced.js","sourceRoot":"","sources":["../../../src/utils/is-motion-reduced.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,eAAe;EAC7B,OAAO,MAAM,CAAC,UAAU,CAAC,kCAAkC,CAAC,CAAC,OAAO,CAAC;AACvE,CAAC","sourcesContent":["export function isMotionReduced(): boolean {\n  return window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n}\n"]}
+{"version":3,"file":"is-motion-reduced.js","sourceRoot":"","sources":["../../../src/utils/is-motion-reduced.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,eAAe;IAC7B,OAAO,MAAM,CAAC,UAAU,CAAC,kCAAkC,CAAC,CAAC,OAAO,CAAC;AACvE,CAAC","sourcesContent":["export function isMotionReduced(): boolean {\n  return window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n}\n"]}

package/dist/collection/utils/property-checkers/check-non-empty.js

@@ -1,7 +1,7 @@
 import { EMPTY_VALUES } from "./constants";
 export function checkNonEmpty(value, error) {
-  if (EMPTY_VALUES.some(v => v === value)) {
-    throw new Error(error);
-  }
+    if (EMPTY_VALUES.some(v => v === value)) {
+        throw new Error(error);
+    }
 }
 //# sourceMappingURL=check-non-empty.js.map