@exmg/exm-tooltip 1.1.36 → 1.2.0

package/.rollup.cache/root/repo/packages/exm-tooltip/dist/exm-tooltip-base.d.ts

@@ -0,0 +1,56 @@
+import { ExmgElement } from '@exmg/lit-base/index.js';
+type TooltipPositions = 'top' | 'right' | 'bottom' | 'left' | 'top-left' | 'top-right' | 'bottom-right' | 'bottom-left';
+export declare class ExmTooltipBase 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: TooltipPositions;
+    /**
+     * 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;
+    private showing;
+    tooltip?: HTMLElement;
+    private _target?;
+    private _parent?;
+    private boundShow;
+    private boundHide;
+    private boundMouseMove;
+    private boundMouseLeave;
+    /**
+     * 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;
+    protected firstUpdated(): void;
+    private handleMousemove;
+    private handleMouseleave;
+    private show;
+    /**
+     * Toggles a CSS class on or off.
+     */
+    private toggleClass;
+    private hide;
+    private updatePosition;
+    private addListeners;
+    private findTarget;
+    private removeListeners;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+export {};

package/.rollup.cache/root/repo/packages/exm-tooltip/dist/exm-tooltip-base.js

@@ -0,0 +1,268 @@
+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 ExmTooltipBase 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;
+        /**
+         * X axis offset from the parent's center
+         */
+        this.xOffset = 0;
+        /**
+         * Y axis offset from the parent's center
+         */
+        this.yOffset = 0;
+        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();
+        if (this.for) {
+            return ownerRoot.querySelector('#' + this.for);
+        }
+        // @ts-ignore
+        return parentNode.nodeType == Node.DOCUMENT_FRAGMENT_NODE ? ownerRoot.host : parentNode;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.boundShow = this.show.bind(this);
+        this.boundHide = this.hide.bind(this);
+        this.boundMouseMove = this.handleMousemove.bind(this);
+        this.boundMouseLeave = this.handleMouseleave.bind(this);
+        this.setAttribute('role', 'tooltip');
+        this.setAttribute('tabindex', '-1');
+        this.findTarget();
+    }
+    disconnectedCallback() {
+        this.removeListeners();
+        super.disconnectedCallback();
+    }
+    firstUpdated() {
+        this.findTarget();
+        this.updatePosition();
+    }
+    handleMousemove(event) {
+        if (!this._target || !this._parent) {
+            return;
+        }
+        const mousePosition = {
+            x: event.clientX,
+            y: event.clientY,
+        };
+        const targetRect = this._target.getBoundingClientRect();
+        if (mousePosition.x < targetRect.left - 1 || mousePosition.x > targetRect.right + 1) {
+            this._parent.removeEventListener('mousemove', this.boundMouseMove);
+            this.hide();
+            return;
+        }
+        if (mousePosition.y < targetRect.top - 1 || mousePosition.y > targetRect.bottom + 1) {
+            this._parent.removeEventListener('mousemove', this.boundMouseMove);
+            this.hide();
+            return;
+        }
+    }
+    handleMouseleave() {
+        if (!this._target || !this._parent) {
+            return;
+        }
+        this.hide();
+        this._parent.removeEventListener('mouseout', this.boundMouseLeave);
+        this._parent.removeEventListener('mousemove', this.boundMouseMove);
+    }
+    show(event) {
+        event.stopPropagation();
+        // If the tooltip is already showing, there's nothing to do.
+        if (this.showing || !this._parent) {
+            return;
+        }
+        this._parent.addEventListener('mousemove', this.boundMouseMove);
+        this._parent.addEventListener('mouseout', this.boundMouseLeave);
+        if (this.textContent.trim() === '') {
+            // Check if effective children are also empty
+            let allChildrenEmpty = true;
+            const effectiveChildren = this.childNodes;
+            for (const child of effectiveChildren) {
+                if (child.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 || !this.tooltip) {
+            return;
+        }
+        const parentRect = this.offsetParent.getBoundingClientRect();
+        const targetRect = this._target.getBoundingClientRect();
+        const thisRect = this.tooltip.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;
+            case 'top-left':
+                tooltipLeft = targetLeft;
+                tooltipTop = targetTop - thisRect.height;
+                break;
+            case 'bottom-left':
+                tooltipLeft = targetLeft;
+                tooltipTop = targetTop + targetRect.height;
+                break;
+            case 'top-right':
+                tooltipLeft = targetLeft - thisRect.width + targetRect.width;
+                tooltipTop = targetTop - thisRect.height;
+                break;
+            case 'bottom-right':
+                tooltipLeft = targetLeft - thisRect.width + targetRect.width;
+                tooltipTop = targetTop + targetRect.height;
+                break;
+        }
+        tooltipLeft += this.xOffset;
+        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('blur', this.boundHide);
+            this._target.addEventListener('tap', this.boundHide);
+        }
+        this.addEventListener('mouseenter', this.boundShow);
+    }
+    findTarget() {
+        this.removeListeners();
+        this._target = this.target;
+        this._parent = this.parentNode;
+        this.addListeners();
+    }
+    removeListeners() {
+        if (this._target) {
+            this._target.removeEventListener('mouseenter', this.boundShow);
+            this._target.removeEventListener('focus', this.boundShow);
+            this._target.removeEventListener('blur', this.boundHide);
+            this._target.removeEventListener('tap', this.boundHide);
+        }
+        this.removeEventListener('mouseenter', this.boundShow);
+    }
+    render() {
+        return html `
+      <section id="tooltip" class="hidden">
+        <slot></slot>
+      </section>
+    `;
+    }
+}
+__decorate([
+    property({ type: String }),
+    observer(function () {
+        this.findTarget();
+    })
+], ExmTooltipBase.prototype, "for", void 0);
+__decorate([
+    property()
+], ExmTooltipBase.prototype, "position", void 0);
+__decorate([
+    property({ type: Boolean })
+], ExmTooltipBase.prototype, "fitToVisibleBounds", void 0);
+__decorate([
+    property({ type: Number })
+], ExmTooltipBase.prototype, "xOffset", void 0);
+__decorate([
+    property({ type: Number })
+], ExmTooltipBase.prototype, "yOffset", void 0);
+__decorate([
+    state()
+], ExmTooltipBase.prototype, "showing", void 0);
+__decorate([
+    query('#tooltip')
+], ExmTooltipBase.prototype, "tooltip", void 0);
+//# sourceMappingURL=exm-tooltip-base.js.map

package/.rollup.cache/root/repo/packages/exm-tooltip/dist/exm-tooltip.d.ts

@@ -0,0 +1,33 @@
+import { ExmTooltipBase } 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 ExmTooltip extends ExmTooltipBase {
+    static styles: import("lit").CSSResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'exm-tooltip': ExmTooltip;
+    }
+}

package/.rollup.cache/root/repo/packages/exm-tooltip/dist/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 { ExmTooltipBase } 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 ExmTooltip = class ExmTooltip extends ExmTooltipBase {
+};
+ExmTooltip.styles = style;
+ExmTooltip = __decorate([
+    customElement('exm-tooltip')
+], ExmTooltip);
+export { ExmTooltip };
+//# sourceMappingURL=exm-tooltip.js.map

package/.rollup.cache/root/repo/packages/exm-tooltip/dist/index.d.ts

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

package/.rollup.cache/root/repo/packages/exm-tooltip/dist/index.js

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

package/.rollup.cache/root/repo/packages/exm-tooltip/dist/styles/exm-tooltip-styles-css.d.ts

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

package/.rollup.cache/root/repo/packages/exm-tooltip/dist/styles/exm-tooltip-styles-css.js

@@ -0,0 +1,35 @@
+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);
+    width: max-content;
+    transition: opacity 0.5s;
+    z-index: 10;
+  }
+
+  #tooltip.hidden {
+    opacity: 0;
+    display: none;
+  }
+`;
+//# sourceMappingURL=exm-tooltip-styles-css.js.map

package/dist/exm-tooltip-base.js

@@ -1,10 +1,11 @@
-import { __decorate } from "tslib";
+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 ExmTooltipBase extends ExmgElement {
+import { observer, ExmgElement } from '@exmg/lit-base/index.js';
+
+class ExmTooltipBase extends ExmgElement {
     constructor() {
         super(...arguments);
         /**
@@ -265,4 +266,6 @@ __decorate([
 __decorate([
     query('#tooltip')
 ], ExmTooltipBase.prototype, "tooltip", void 0);
-//# sourceMappingURL=exm-tooltip-base.js.map
+
+export { ExmTooltipBase };
+//# sourceMappingURL=exm-tooltip-base.js.map

package/dist/exm-tooltip.js

@@ -1,7 +1,8 @@
-import { __decorate } from "tslib";
+import { __decorate } from 'tslib';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { style } from './styles/exm-tooltip-styles-css.js';
 import { ExmTooltipBase } from './exm-tooltip-base.js';
+
 /**
  * `exm-tooltip`
  * Example:
@@ -32,5 +33,6 @@ ExmTooltip.styles = style;
 ExmTooltip = __decorate([
     customElement('exm-tooltip')
 ], ExmTooltip);
+
 export { ExmTooltip };
-//# sourceMappingURL=exm-tooltip.js.map
+//# sourceMappingURL=exm-tooltip.js.map

package/dist/index.js

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

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

@@ -1,5 +1,6 @@
 import { css } from 'lit';
-export const style = css `
+
+const style = css `
   :host {
     display: block;
     position: absolute;
@@ -32,4 +33,6 @@ export const style = css `
     display: none;
   }
 `;
-//# sourceMappingURL=exm-tooltip-styles-css.js.map
+
+export { style };
+//# sourceMappingURL=exm-tooltip-styles-css.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@exmg/exm-tooltip",
-  "version": "1.1.36",
+  "version": "1.2.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -36,5 +36,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "0fb4c4b7fdbc8d149a825e172b63f7e00c8e8a4a"
+  "gitHead": "b5f4ed4f41d79e3cce85dc0c44181ef4413d7458"
 }