@claromentis/design-system/dist/collection/components/cla-popover/cla-popover.js

Claromentis Design System Component Library

import { h } from '@stencil/core';
import { isInViewport } from "../../utils/utils";
/**
 *  @slot - This is where the item the popover wraps goes
 *  @slot content - Allows content to be added to the popover.
 */
export class Popover {
  constructor() {
    /**
    * offsets the Popover if it is outside the bounds of the left of the viewport
    */
    this.offestPopover = () => {
      const shadowPopover = this.element.shadowRoot.querySelector('.popover');
      const shadowPopoverRect = shadowPopover.getBoundingClientRect();
      if (!isInViewport(shadowPopover) && shadowPopoverRect.left < 0) {
        const currentLeftPosition = shadowPopover.offsetLeft;
        let leftOffset = currentLeftPosition - shadowPopoverRect.left;
        String(leftOffset);
        shadowPopover.setAttribute('style', 'left:' + leftOffset + 'px');
      }
    };
    this.toggle = false;
  }
  // Close the popover if the page is clicked
  clickOff(event) {
    if (!this.toggle)
      return;
    if (event.composedPath().indexOf(this.element) === -1)
      this.toggle = false;
  }
  togglePopover() {
    this.toggle = !this.toggle;
  }
  componentDidLoad() {
    this.offestPopover();
  }
  render() {
    return (h("div", { class: this.toggle ? 'popover-wrapper in' : 'popover-wrapper' }, h("span", { onMouseDown: () => this.togglePopover(), class: "inner" }, h("slot", null)), h("div", { class: "popover bs-popover-bottom", role: "tooltip" }, h("div", { class: "popover-body" }, h("slot", { name: "content" })))));
  }
  static get is() { return "cla-popover"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() {
    return {
      "$": ["cla-popover.scss"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["cla-popover.css"]
    };
  }
  static get states() {
    return {
      "toggle": {}
    };
  }
  static get events() {
    return [{
        "method": "toggleEvent",
        "name": "toggleEvent",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": "Emitted when the menu is toggled."
        },
        "complexType": {
          "original": "any",
          "resolved": "any",
          "references": {}
        }
      }];
  }
  static get elementRef() { return "element"; }
  static get listeners() {
    return [{
        "name": "mousedown",
        "method": "clickOff",
        "target": "window",
        "capture": false,
        "passive": true
      }];
  }
}