@exmg/exm-tooltip 1.0.0

package/README.md

@@ -0,0 +1,69 @@
+# `<exm-tooltip>` [![Published on npm](https://img.shields.io/npm/v/@exmg/exm-tooltip.svg)](https://www.npmjs.com/package/@exmg/exm-tooltip)
+
+# @exmg/exm-tooltip
+
+Tooltip element to display small amounts of information bound to an element.
+
+[Demo](https://exmg.github.io/exmachina-web-components/demo/?el=exm-tooltip)
+
+## Installation
+
+```sh
+npm install @exmg/exm-tooltip
+```
+
+## Example Usage
+
+### Standard
+
+```html
+<div style="position:relative;">
+  <button id="styledBtn">Test</button>
+  <exm-tooltip for="styledBtn">the name means "different lizard"</exm-tooltip>
+</div>
+```
+
+## API
+
+### Slots
+
+| Name      | Description                        |
+| --------- | ---------------------------------- |
+| _default_ | Button to handle copy to clipboard |
+
+### Properties/Attributes
+
+| Name                 | Type      | Default    | Description                                                                                           |
+| -------------------- | --------- | ---------- | ----------------------------------------------------------------------------------------------------- |
+| `for`                | `string`  | _None_     | The id of the element that the tooltip is anchored to. This element must be a sibling of the tooltip. |
+| `position`           | `string`  | _`bottom`_ | Positions the tooltip to the top, right, bottom, left of its content.                                 |
+| `fitToVisibleBounds` | `boolean` | _None_     | The id of the element that the tooltip is anchored to. This element must be a sibling of the tooltip. |
+| `xOffset`            | `number`  | _None_     | X axis offset from the parent's center.                                                               |
+| `yOffset`            | `number`  | _None_     | Y axis offset from the parent's center.                                                               |
+
+### Methods
+
+_None_
+
+### Events
+
+_None_
+
+### CSS Custom Properties
+
+| Name                          | Default   | Description               |
+| ----------------------------- | --------- | ------------------------- |
+| `--exm-tooltip-font-size`     | `10px`    | Font size of tooltip text |
+| `--exm-tooltip-line-height`   | `1`       | Text line height          |
+| `--exm-tooltip-background`    | `#616161` | Background color          |
+| `--exm-tooltip-opacity`       | `0.9`     | Tooltip opacity           |
+| `--exm-tooltip-text-color`    | `white`   | Font color                |
+| `--exm-tooltip-padding`       | `8px`     | Container padding         |
+| `--exm-tooltip-border-radius` | `2px`     | Container border radius   |
+| `--exm-tooltip-min-width`     | `initial` | Min width of the tooltip  |
+
+## Additional references
+
+- [Additional Documentation](https://exmg.github.io/exmachina-web-components/ExmgTooltip.html)
+
+- [Demo](https://exmg.github.io/exmachina-web-components/demo/?el=exm-tooltip)

package/index.d.ts

@@ -0,0 +1,3 @@
+export { ExmgTooltip } from './src/exm-tooltip.js';
+export { ExmgTooltipBase } from './src/exm-tooltip-base.js';
+export { style as tooltipStyles } from './src/styles/exm-tooltip-styles-css.js';

package/index.js

@@ -0,0 +1,4 @@
+export { ExmgTooltip } from './src/exm-tooltip.js';
+export { ExmgTooltipBase } from './src/exm-tooltip-base.js';
+export { style as tooltipStyles } from './src/styles/exm-tooltip-styles-css.js';
+//# sourceMappingURL=index.js.map

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@exmg/exm-tooltip",
+  "version": "1.0.0",
+  "type": "module",
+  "main": "index.js",
+  "module": "index.js",
+  "exports": {
+    ".": "./index.js",
+    "./exm-tooltip.js": "./src/exm-tooltip.js"
+  },
+  "dependencies": {
+    "@exmg/lit-base": "^2.0.1",
+    "lit": "^3.0.0",
+    "tslib": "^2.6.2"
+  },
+  "files": [
+    "**/*.scss",
+    "**/*.js",
+    "**/*.d.ts"
+  ],
+  "keywords": [
+    "web-components",
+    "lit-element",
+    "tooltip"
+  ],
+  "homepage": "https://github.com/exmg/exmachina-web-components",
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:exmg/exm-web-components.git",
+    "directory": "packages/exm-tooltip"
+  },
+  "license": "MIT",
+  "devDependencies": {
+    "@exmg/lit-cli": "1.1.13"
+  },
+  "scripts": {
+    "build:styles": "exmg-lit-cli sass -f \"./**/*.scss\""
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "0907b55c89325d59902b98a64c352bf6e1fc81ff"
+}

package/src/exm-tooltip-base.d.ts

@@ -0,0 +1,48 @@
+import { ExmgElement } from '@exmg/lit-base/index.js';
+export declare class ExmgTooltipBase extends ExmgElement {
+    /**
+     * The id of the element that the tooltip is anchored to. This element
+     * must be a sibling of the tooltip.
+     */
+    for?: string;
+    /**
+     * Positions the tooltip to the top, right, bottom, left of its content.
+     */
+    position: string;
+    /**
+     * If true, no parts of the tooltip will ever be shown offscreen.
+     */
+    fitToVisibleBounds: boolean;
+    /**
+     * X axis offset from the parent's center
+     */
+    xOffset?: number;
+    /**
+     * Y axis offset from the parent's center
+     */
+    yOffset?: number;
+    _showing: boolean;
+    tooltip?: HTMLElement;
+    private _target?;
+    private _boundShow;
+    private _boundHide;
+    /**
+     * Returns the target element that this tooltip is anchored to. It is
+     * either the element given by the `for` attribute, or the immediate parent
+     * of the tooltip.
+     */
+    get target(): any;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    show(): void;
+    /**
+     * Toggles a CSS class on or off.
+     */
+    toggleClass(name: string, bool: boolean, node: HTMLElement): void;
+    hide(): void;
+    updatePosition(): void;
+    _addListeners(): void;
+    _findTarget(): void;
+    _removeListeners(): void;
+    protected render(): import("lit-html").TemplateResult<1>;
+}

package/src/exm-tooltip-base.js

@@ -0,0 +1,216 @@
+import { __decorate } from "tslib";
+import { html } from 'lit';
+import { property } from 'lit/decorators/property.js';
+import { state } from 'lit/decorators.js';
+import { query } from 'lit/decorators/query.js';
+import { ExmgElement, observer } from '@exmg/lit-base/index.js';
+export class ExmgTooltipBase extends ExmgElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Positions the tooltip to the top, right, bottom, left of its content.
+         */
+        this.position = 'bottom';
+        /**
+         * If true, no parts of the tooltip will ever be shown offscreen.
+         */
+        this.fitToVisibleBounds = false;
+        this._showing = false;
+    }
+    /**
+     * Returns the target element that this tooltip is anchored to. It is
+     * either the element given by the `for` attribute, or the immediate parent
+     * of the tooltip.
+     */
+    get target() {
+        const parentNode = this.parentNode;
+        // If the parentNode is a document fragment, then we need to use the host.
+        const ownerRoot = parentNode.getRootNode();
+        let target;
+        if (this.for) {
+            target = ownerRoot.querySelector('#' + this.for);
+        }
+        else {
+            // @ts-ignore
+            target = parentNode.nodeType == Node.DOCUMENT_FRAGMENT_NODE ? ownerRoot.host : parentNode;
+        }
+        return target;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._boundShow = this.show.bind(this);
+        this._boundHide = this.hide.bind(this);
+        this.setAttribute('role', 'tooltip');
+        this.setAttribute('tabindex', '-1');
+        this._findTarget();
+    }
+    disconnectedCallback() {
+        this._removeListeners();
+        super.disconnectedCallback();
+    }
+    show() {
+        // If the tooltip is already showing, there's nothing to do.
+        if (this._showing) {
+            return;
+        }
+        if (this.textContent.trim() === '') {
+            // Check if effective children are also empty
+            let allChildrenEmpty = true;
+            const effectiveChildren = this.childNodes;
+            for (let i = 0; i < effectiveChildren.length; i++) {
+                if (effectiveChildren[i].textContent.trim() !== '') {
+                    allChildrenEmpty = false;
+                    break;
+                }
+            }
+            if (allChildrenEmpty) {
+                return;
+            }
+        }
+        this._showing = true;
+        this.toggleClass('hidden', false, this.tooltip);
+        this.updatePosition();
+    }
+    /**
+     * Toggles a CSS class on or off.
+     */
+    toggleClass(name, bool, node) {
+        node = /** @type {Element} */ node || this;
+        if (arguments.length == 1) {
+            bool = !node.classList.contains(name);
+        }
+        if (bool) {
+            node.classList.add(name);
+        }
+        else {
+            node.classList.remove(name);
+        }
+    }
+    hide() {
+        // If the tooltip is already hidden, there's nothing to do.
+        if (!this._showing) {
+            return;
+        }
+        this._showing = false;
+        this.toggleClass('hidden', true, this.tooltip);
+    }
+    updatePosition() {
+        if (!this._target || !this.offsetParent) {
+            return;
+        }
+        const parentRect = this.offsetParent.getBoundingClientRect();
+        const targetRect = this._target.getBoundingClientRect();
+        const thisRect = this.getBoundingClientRect();
+        const horizontalCenterOffset = (targetRect.width - thisRect.width) / 2;
+        const verticalCenterOffset = (targetRect.height - thisRect.height) / 2;
+        const targetLeft = targetRect.left - parentRect.left;
+        const targetTop = targetRect.top - parentRect.top;
+        let tooltipLeft = 0;
+        let tooltipTop = 0;
+        switch (this.position) {
+            case 'top':
+                tooltipLeft = targetLeft + horizontalCenterOffset;
+                tooltipTop = targetTop - thisRect.height;
+                break;
+            case 'bottom':
+                tooltipLeft = targetLeft + horizontalCenterOffset;
+                tooltipTop = targetTop + targetRect.height;
+                break;
+            case 'left':
+                tooltipLeft = targetLeft - thisRect.width;
+                tooltipTop = targetTop + verticalCenterOffset;
+                break;
+            case 'right':
+                tooltipLeft = targetLeft + targetRect.width;
+                tooltipTop = targetTop + verticalCenterOffset;
+                break;
+        }
+        if (this.xOffset !== undefined) {
+            tooltipLeft += this.xOffset;
+        }
+        if (this.yOffset !== undefined) {
+            tooltipTop += this.yOffset;
+        }
+        if (this.fitToVisibleBounds) {
+            // Clip the left/right side
+            if (parentRect.left + tooltipLeft + thisRect.width > window.innerWidth) {
+                this.style.right = '0px';
+                this.style.left = 'auto';
+            }
+            else {
+                this.style.left = Math.max(0, tooltipLeft) + 'px';
+                this.style.right = 'auto';
+            }
+            // Clip the top/bottom side.
+            if (parentRect.top + tooltipTop + thisRect.height > window.innerHeight) {
+                this.style.bottom = parentRect.height + 'px';
+                this.style.top = 'auto';
+            }
+            else {
+                this.style.top = Math.max(-parentRect.top, tooltipTop) + 'px';
+                this.style.bottom = 'auto';
+            }
+        }
+        else {
+            this.style.left = tooltipLeft + 'px';
+            this.style.top = tooltipTop + 'px';
+        }
+    }
+    _addListeners() {
+        if (this._target) {
+            this._target.addEventListener('mouseenter', this._boundShow);
+            this._target.addEventListener('focus', this._boundShow);
+            this._target.addEventListener('mouseleave', this._boundHide);
+            this._target.addEventListener('blur', this._boundHide);
+            this._target.addEventListener('tap', this._boundHide);
+        }
+        this.addEventListener('mouseenter', this._boundHide);
+    }
+    _findTarget() {
+        this._removeListeners();
+        this._target = this.target;
+        this._addListeners();
+    }
+    _removeListeners() {
+        if (this._target) {
+            this._target.removeEventListener('mouseenter', this._boundShow);
+            this._target.removeEventListener('focus', this._boundShow);
+            this._target.removeEventListener('mouseleave', this._boundHide);
+            this._target.removeEventListener('blur', this._boundHide);
+            this._target.removeEventListener('tap', this._boundHide);
+        }
+        this.removeEventListener('mouseenter', this._boundHide);
+    }
+    render() {
+        return html `
+      <div id="tooltip" class="hidden">
+        <slot></slot>
+      </div>
+    `;
+    }
+}
+__decorate([
+    property({ type: String }),
+    observer(function () {
+        this._findTarget();
+    })
+], ExmgTooltipBase.prototype, "for", void 0);
+__decorate([
+    property({ type: String })
+], ExmgTooltipBase.prototype, "position", void 0);
+__decorate([
+    property({ type: Boolean })
+], ExmgTooltipBase.prototype, "fitToVisibleBounds", void 0);
+__decorate([
+    property({ type: Number })
+], ExmgTooltipBase.prototype, "xOffset", void 0);
+__decorate([
+    property({ type: Number })
+], ExmgTooltipBase.prototype, "yOffset", void 0);
+__decorate([
+    state()
+], ExmgTooltipBase.prototype, "_showing", void 0);
+__decorate([
+    query('#tooltip')
+], ExmgTooltipBase.prototype, "tooltip", void 0);
+//# sourceMappingURL=exm-tooltip-base.js.map

package/src/exm-tooltip.d.ts

@@ -0,0 +1,33 @@
+import { ExmgTooltipBase } from './exm-tooltip-base.js';
+/**
+ * `exm-tooltip`
+ * Example:
+ * ```html
+ *  <div style="position:relative;">
+ *    <button id="styledBtn">Test</button>
+ *    <exm-tooltip for="styledBtn">the name means "different lizard"</exm-tooltip>
+ *  </div>
+ * ```
+ *
+ * ### Styling
+ * The following custom properties and mixins are available for styling:
+ *
+ * Custom property | Description | Default
+ * ----------------|-------------|----------
+ * `--exm-tooltip-font-size` | Font size of tooltip text | 10px
+ * `--exm-tooltip-line-height` | Text line height | 1
+ * `--exm-tooltip-background` | Background color | #616161
+ * `--exm-tooltip-opacity` | Tooltip opacity | 0.9
+ * `--exm-tooltip-text-color` | Font color | white
+ * `--exm-tooltip-padding` | Container padding | 8px
+ * `--exm-tooltip-border-radius` | Container border radius | 2px
+ * `--exm-tooltip-min-width` | Breadcrumb container background color | initial
+ */
+export declare class ExmgTooltip extends ExmgTooltipBase {
+    static styles: import("lit").CSSResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'exm-tooltip': ExmgTooltip;
+    }
+}

package/src/exm-tooltip.js

@@ -0,0 +1,36 @@
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators/custom-element.js';
+import { style } from './styles/exm-tooltip-styles-css.js';
+import { ExmgTooltipBase } from './exm-tooltip-base.js';
+/**
+ * `exm-tooltip`
+ * Example:
+ * ```html
+ *  <div style="position:relative;">
+ *    <button id="styledBtn">Test</button>
+ *    <exm-tooltip for="styledBtn">the name means "different lizard"</exm-tooltip>
+ *  </div>
+ * ```
+ *
+ * ### Styling
+ * The following custom properties and mixins are available for styling:
+ *
+ * Custom property | Description | Default
+ * ----------------|-------------|----------
+ * `--exm-tooltip-font-size` | Font size of tooltip text | 10px
+ * `--exm-tooltip-line-height` | Text line height | 1
+ * `--exm-tooltip-background` | Background color | #616161
+ * `--exm-tooltip-opacity` | Tooltip opacity | 0.9
+ * `--exm-tooltip-text-color` | Font color | white
+ * `--exm-tooltip-padding` | Container padding | 8px
+ * `--exm-tooltip-border-radius` | Container border radius | 2px
+ * `--exm-tooltip-min-width` | Breadcrumb container background color | initial
+ */
+let ExmgTooltip = class ExmgTooltip extends ExmgTooltipBase {
+};
+ExmgTooltip.styles = style;
+ExmgTooltip = __decorate([
+    customElement('exm-tooltip')
+], ExmgTooltip);
+export { ExmgTooltip };
+//# sourceMappingURL=exm-tooltip.js.map

package/src/styles/exm-tooltip-styles-css.d.ts

@@ -0,0 +1,2 @@
+export declare const style: import("lit").CSSResult;
+export default style;

package/src/styles/exm-tooltip-styles-css.js

@@ -0,0 +1,4 @@
+import { css } from 'lit';
+export const style = css `:host{display:block;position:absolute;outline:none;z-index:var(--exm-tooltip-z-index, 1002);-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none;cursor:default}#tooltip{display:block;outline:none;font-size:var(--exm-tooltip-font-size, 12px);line-height:var(--exm-tooltip-line-height, 14px);background-color:var(--exm-tooltip-background-color, var(--md-sys-color-inverse-surface, #333));color:var(--exm-tooltip-color, var(--md-sys-color-inverse-on-surface, white));padding:var(--exm-tooltip-padding, 8px);border-radius:var(--exm-tooltip-border-radius, 2px);min-width:var(--exm-tooltip-min-width, initial);transition:opacity .5s}#tooltip.hidden{opacity:0;display:none}`;
+export default style;
+//# sourceMappingURL=exm-tooltip-styles-css.js.map

package/src/styles/exm-tooltip-styles.scss

@@ -0,0 +1,29 @@
+:host {
+  display: block;
+  position: absolute;
+  outline: none;
+  z-index: var(--exm-tooltip-z-index, 1002);
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -webkit-user-select: none;
+  user-select: none;
+  cursor: default;
+}
+
+#tooltip {
+  display: block;
+  outline: none;
+  font-size: var(--exm-tooltip-font-size, 12px);
+  line-height: var(--exm-tooltip-line-height, 14px);
+  background-color: var(--exm-tooltip-background-color, var(--md-sys-color-inverse-surface, #333));
+  color: var(--exm-tooltip-color, var(--md-sys-color-inverse-on-surface, white));
+  padding: var(--exm-tooltip-padding, 8px);
+  border-radius: var(--exm-tooltip-border-radius, 2px);
+  min-width: var(--exm-tooltip-min-width, initial);
+  transition: opacity 0.5s;
+}
+
+#tooltip.hidden {
+  opacity: 0;
+  display: none;
+}