ui-lit/tooltip/index.js

UI Elements on LIT

import { __decorate } from "tslib";
import { styleMap } from 'lit/directives/style-map.js';
import { LitElement, html, css, nothing } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import './tooltip-item';
import { scrollbar } from '../styles/scrollbar';
let ToolTip = class ToolTip extends LitElement {
    constructor() {
        super(...arguments);
        this.opened = false;
        this._onClick = () => {
            if (this.opened) {
                this.close();
            }
            else {
                this.open();
            }
        };
        this.getPosition = () => {
            const targetRect = this.getBoundingClientRect();
            const awailableWidth = window.visualViewport.width;
            const awailableHeight = window.visualViewport.height;
            const x = (targetRect.x); //|| rect.x;
            const y = (targetRect.y); //|| rect.y;
            const availableTop = y;
            const availableBottom = awailableHeight - y;
            const availableLeft = x;
            const availableRight = awailableWidth - x;
            return {
                top: availableTop < availableBottom ? (availableTop + targetRect.height) + `px` : "initial",
                bottom: availableTop > availableBottom ? availableBottom + `px` : "initial",
                maxHeight: availableTop < availableBottom ? (availableBottom - 10) + `px` : (availableTop - 10) + `px`,
                left: availableLeft < availableRight ? (availableLeft + targetRect.width) + `px` : 'initial',
                right: availableLeft > availableRight ? (availableRight + 10) + `px` : 'initial',
                maxWidth: availableLeft < availableRight ? (availableRight - targetRect.width - 10) + `px` : (availableLeft - 10) + 'px'
            };
        };
    }
    _tooltipTemplate() {
        if (!this.opened) {
            return nothing;
        }
        const styles = {
            ...this.getPosition(),
        };
        return html `
        <tooltip-item
            class = "ff-scrollbar"
            @close = "${this.close}"
            
            style = "${styleMap(styles)}"><slot name = "tooltip"></slot></tooltip-item>`;
    }
    render() {
        return [
            this._tooltipTemplate(),
            html `<div @click = "${this._onClick}"
                          id = "content">
                    <slot></slot>
                </div>`
        ];
    }
    open() {
        this.opened = true;
    }
    close() {
        this.opened = false;
    }
};
ToolTip.styles = [css `
    :host{
        display: inline-block;
        cursor: pointer;
        position: relative;
    }
    `, scrollbar];
__decorate([
    state()
], ToolTip.prototype, "opened", void 0);
ToolTip = __decorate([
    customElement('lit-tooltip')
], ToolTip);
export { ToolTip };