ui-lit/tooltip/tooltip-item.js

UI Elements on LIT

import { __decorate } from "tslib";
import { LitElement, html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { isClickInElement } from 'kailib';
import { tooltipStyles } from './styles';
let TooltimItem = class TooltimItem extends LitElement {
    constructor() {
        super(...arguments);
        this.props = null;
        this._onClick = (e) => {
            if (!isClickInElement(e, this)) {
                this._onClose();
            }
        };
    }
    willUpdate(_changedProperties) {
        if (_changedProperties.has('props') && this.props) {
            this.style.top = this.props.top;
            this.style.bottom = this.props.bottom;
            this.style.left = this.props.left;
            this.style.right = this.props.right;
        }
    }
    connectedCallback() {
        super.connectedCallback();
        setTimeout(() => {
            document.addEventListener('click', this._onClick);
        });
    }
    disconnectedCallback() {
        super.connectedCallback();
        document.removeEventListener('click', this._onClick);
    }
    firstUpdated() {
        setTimeout(() => {
            this.classList.add('visible');
        }, 1);
    }
    render() {
        return html `
        <div><slot></slot></div>
        <lit-icon 
            @click = "${this._onClose}"
            icon = "cancel"></lit-icon>`;
    }
    _onClose() {
        this.dispatchEvent(new CustomEvent("close"));
    }
};
TooltimItem.styles = tooltipStyles;
__decorate([
    property({ type: Object })
], TooltimItem.prototype, "props", void 0);
TooltimItem = __decorate([
    customElement('tooltip-item')
], TooltimItem);
export { TooltimItem };