{"code":"import * as tslib_1 from \"tslib\";\r\nimport { LitElement } from '@polymer/lit-element';\r\nimport { html } from 'lit-html';\r\nimport { component, property, bindAttributes } from '../../util/decorators';\r\nimport CSS from './tooltip-css';\r\nlet Tooltip = class Tooltip extends LitElement {\r\n    constructor() {\r\n        super();\r\n        this.position = 'bottom';\r\n        this.__show = false;\r\n        this._update = this._update.bind(this);\r\n        this._remove = this._remove.bind(this);\r\n        this._show = this._show.bind(this);\r\n        this._hide = this._hide.bind(this);\r\n    }\r\n    ready() {\r\n        super.ready();\r\n        this.show = false;\r\n    }\r\n    connectedCallback() {\r\n        super.connectedCallback();\r\n        this._update();\r\n        if (this.removable) {\r\n            window.addEventListener('mouseup', this._remove);\r\n            window.addEventListener('keydown', this._remove);\r\n        }\r\n        window.addEventListener('scroll', this._update);\r\n        window.addEventListener('resize', this._update);\r\n    }\r\n    disconnectedCallback() {\r\n        super.disconnectedCallback();\r\n        window.removeEventListener('scroll', this._update);\r\n        window.removeEventListener('resize', this._update);\r\n    }\r\n    get show() {\r\n        return this.__show;\r\n    }\r\n    set show(v) {\r\n        if (v)\r\n            this.setAttribute('show', 'true');\r\n        else\r\n            this.removeAttribute('show');\r\n        this.__show = v;\r\n    }\r\n    get for() {\r\n        if (typeof this._for === 'string')\r\n            return document.querySelector(`#${this._for}`);\r\n        else\r\n            return this._for || null;\r\n    }\r\n    set for(v) {\r\n        if (v && this._for !== v) {\r\n            this._updateHandlers('remove');\r\n            this._for = v;\r\n            this._updateHandlers('add');\r\n            this._update();\r\n        }\r\n    }\r\n    get on() {\r\n        return this._on;\r\n    }\r\n    set on(v) {\r\n        this._updateHandlers('remove');\r\n        this._on = v;\r\n        this._updateHandlers('add');\r\n    }\r\n    _render() {\r\n        return html `${CSS}<slot></slot>`;\r\n    }\r\n    _didRender() {\r\n        this._update();\r\n    }\r\n    _show() { this.show = true; }\r\n    _hide() { this.show = false; }\r\n    _update() {\r\n        if (!this.for || !this.position) {\r\n            this.show = false;\r\n            return;\r\n        }\r\n        const { x, y, width, height } = this.for.getBoundingClientRect();\r\n        if (/^left$/.test(this.position)) {\r\n            this.style.left = `${parseInt(x.toString(), 10)}px`;\r\n        }\r\n        else if (/^right$/.test(this.position)) {\r\n            this.style.left = `${parseInt((x + width).toString(), 10)}px`;\r\n        }\r\n        else {\r\n            this.style.left = `${parseInt((x + width / 2).toString(), 10)}px`;\r\n        }\r\n        if (/^top$/.test(this.position)) {\r\n            this.style.top = `${parseInt(y.toString(), 10)}px`;\r\n        }\r\n        else if (/^bottom$/.test(this.position)) {\r\n            this.style.top = `${parseInt((y + height).toString(), 10)}px`;\r\n        }\r\n        else {\r\n            this.style.top = `${parseInt((y + height / 2).toString(), 10)}px`;\r\n        }\r\n    }\r\n    _remove(e) {\r\n        if (e instanceof KeyboardEvent) {\r\n            if (e.key !== 'Escape')\r\n                return;\r\n        }\r\n        window.removeEventListener('keydown', this._remove);\r\n        window.removeEventListener('click', this._remove);\r\n        this.remove();\r\n    }\r\n    _updateHandlers(type) {\r\n        const f = this.for;\r\n        if (!f || typeof this.on === 'boolean')\r\n            return;\r\n        const fun = type === 'add' ? f.addEventListener.bind(f) : f.removeEventListener.bind(f);\r\n        switch (this.on) {\r\n            case 'hover':\r\n                fun('mouseenter', this._show);\r\n                fun('mouseleave', this._hide);\r\n                break;\r\n        }\r\n    }\r\n};\r\nTooltip._boundAttributes = ['position', 'on'];\r\ntslib_1.__decorate([\r\n    property,\r\n    tslib_1.__metadata(\"design:type\", String)\r\n], Tooltip.prototype, \"position\", void 0);\r\ntslib_1.__decorate([\r\n    property,\r\n    tslib_1.__metadata(\"design:type\", Object),\r\n    tslib_1.__metadata(\"design:paramtypes\", [Object])\r\n], Tooltip.prototype, \"show\", null);\r\ntslib_1.__decorate([\r\n    property,\r\n    tslib_1.__metadata(\"design:type\", Object),\r\n    tslib_1.__metadata(\"design:paramtypes\", [Object])\r\n], Tooltip.prototype, \"for\", null);\r\ntslib_1.__decorate([\r\n    property,\r\n    tslib_1.__metadata(\"design:type\", Object),\r\n    tslib_1.__metadata(\"design:paramtypes\", [Object])\r\n], Tooltip.prototype, \"on\", null);\r\nTooltip = tslib_1.__decorate([\r\n    component('zen-tooltip'),\r\n    bindAttributes,\r\n    tslib_1.__metadata(\"design:paramtypes\", [])\r\n], Tooltip);\r\nexport default Tooltip;\r\n","dts":{"name":"/Users/tristanmatthias/projects/origami/zen/packages/components/Tooltip/Tooltip.d.ts","text":"import { LitElement } from '@polymer/lit-element';\r\nimport { TemplateResult } from 'lit-html';\r\nexport declare type TooltipPosition = 'top-left' | 'top' | 'top-right' | 'right-top' | 'right' | 'right-bottom' | 'bottom-right' | 'bottom' | 'bottom-left' | 'top-right' | 'left-bottom' | 'left' | 'left-top';\r\nexport interface props {\r\n    position?: TooltipPosition;\r\n    show: boolean;\r\n    __show: boolean;\r\n    for: HTMLElement | null;\r\n    _for?: HTMLElement | string;\r\n    on?: boolean | 'hover';\r\n    _on?: boolean | 'hover';\r\n}\r\nexport default class Tooltip extends LitElement implements props {\r\n    position?: TooltipPosition;\r\n    private static _boundAttributes;\r\n    constructor();\r\n    ready(): void;\r\n    connectedCallback(): void;\r\n    disconnectedCallback(): void;\r\n    show: boolean;\r\n    __show: boolean;\r\n    for: HTMLElement | null;\r\n    _for?: string | HTMLElement;\r\n    on: boolean | \"hover\" | undefined;\r\n    _on?: boolean | 'hover';\r\n    _render(): TemplateResult;\r\n    _didRender(): void;\r\n    private _show();\r\n    private _hide();\r\n    private _update();\r\n    private _remove(e);\r\n    private _updateHandlers(type);\r\n}\r\n"}}