{"version":3,"sources":["../src/elements/tooltip.ts","../src/styles/elements/tooltip.ts"],"sourcesContent":["import { html } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport { stylesTooltip } from '../styles/elements/tooltip';\nimport { stylesPopper } from '../styles/elements/popper';\nimport {\n  stylesPopperFade,\n  stylesPopperScale,\n  stylesPopperSlide,\n  stylesPopperFall,\n  stylesPopperFlipHorizontal,\n  stylesPopperFlipVertical,\n  stylesPopperSign,\n  stylesPopperSuperScaled,\n} from '../styles/elements/popper';\nimport KemetPopper from '../elements/popper';\n\n/**\n * @since 2.0.0\n * @status stable\n *\n * @tagname kemet-tooltip\n * @summary A tooltip is a Popper component that displays a dynamic arrow pointing to the trigger.\n *\n * @slot trigger - Controls opening and closing the tooltip.\n * @slot content - The contents of the tooltip.\n *\n * @csspart trigger - Contains the trigger for the tooltip.\n * @csspart content - Contains the content for the tooltip.\n *\n * @cssproperty --kemet-tooltip-content-height - The height of the content.\n * @cssproperty --kemet-tooltip-size - The width and height of arrow's container\n * @cssproperty --kemet-tooltip-border-size - The border size of the arrow\n * @cssproperty --kemet-tooltip-rounded-tip - How much rounding the tip of the arrow should be. Zero is pointy\n * @cssproperty --kemet-tooltip-background-color - The background color of the arrow\n * @cssproperty --kemet-tooltip-border-color - The border color of the arrow\n * @cssproperty --kemet-tooltip-placement-offset - The offset of the arrow from the trigger\n *\n */\n\n@customElement('kemet-tooltip')\nexport default class KemetTooltip extends KemetPopper {\n  static styles = [stylesTooltip, stylesPopper, stylesPopperFade, stylesPopperScale, stylesPopperSlide, stylesPopperFall, stylesPopperFlipHorizontal, stylesPopperFlipVertical, stylesPopperSign, stylesPopperSuperScaled];\n\n  render() {\n    return html`\n      <div\n        id=\"trigger\"\n        part=\"trigger\"\n        tabIndex=\"0\"\n        @click=${this.fireOn === 'click' ? (event: MouseEvent) => this.toggle(event) : null}\n        @keyup=${this.fireOn === 'click' ? (event: KeyboardEvent) => this.handleKeyUp(event) : null}\n        @mouseover=${this.fireOn !== 'click' ? () => { this.opened = true; } : null}\n        @focus=${this.fireOn !== 'click' ? () => { this.opened = true; } : null}\n        @mouseout=${this.fireOn !== 'click' ? () => { this.opened = false; } : null}\n        @blur=${this.fireOn !== 'click' ? () => { this.opened = false; } : null}\n      >\n        <slot name=\"trigger\"></slot>\n      </div>\n      <div\n        id=\"content\"\n        @mouseover=${this.fireOn !== 'click' ? () => { this.opened = true; } : null}\n        @mouseout=${this.fireOn !== 'click' ? () => { this.opened = false; } : null}\n      >\n        <slot name=\"content\" @slotchange=${() => { this.makePopper(); this.measureContent(); }}></slot>\n        <div id=\"arrow-container\" part=\"arrow-container\" data-popper-arrow>\n          <div id=\"arrow\" part=\"arrow\"></div>\n        </div>\n      </div>\n    `;\n  }\n\n  measureContent() {\n    const height = this.contentElement.offsetHeight;\n    this.contentElement.style.setProperty('--kemet-tooltip-content-height', `${height}px`);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-tooltip': KemetTooltip\n  }\n}\n","import { css } from 'lit';\n\nexport const stylesTooltip = css`\n  :host {\n    --kemet-tooltip-deg: -45deg;\n    --kemet-tooltip-size: 22px;\n    --kemet-tooltip-border-size: 1px;\n    --kemet-tooltip-rounded-tip: 4px;\n    --kemet-tooltip-background-color: rgb(var(--kemet-color-background));\n    --kemet-tooltip-border-color: rgb(var(--kemet-color-foreground));\n    --kemet-tooltip-placement-offset: calc(calc(var(--kemet-tooltip-size) / 2) * -1);\n  }\n\n  #arrow {\n    content: '';\n    width: var(--kemet-tooltip-size);\n    height: var(--kemet-tooltip-size);\n    position: relative;\n    display: inline-block;\n    background: linear-gradient(\n        var(--kemet-tooltip-deg),\n        transparent calc(var(--kemet-tooltip-size) / 1.5),\n        var(--kemet-tooltip-background-color) 0\n      )\n      no-repeat;\n    background-repeat: no-repeat;\n    transform-origin: center center;\n    border-top-left-radius: var(--kemet-tooltip-rounded-tip);\n    border-left: var(--kemet-tooltip-border-size) solid var(--kemet-tooltip-border-color);\n    border-top: var(--kemet-tooltip-border-size) solid var(--kemet-tooltip-border-color);\n  }\n\n  [data-popper-placement^=\"top\"] #arrow {\n    top: var(--kemet-tooltip-placement-offset);\n    transform: rotate(225deg);\n\n  }\n\n  [data-popper-placement^=\"bottom\"] #arrow-container {\n    top: 0px;\n  }\n\n  [data-popper-placement^=\"bottom\"] #arrow {\n    top: var(--kemet-tooltip-placement-offset);\n    transform: rotate(45deg);\n  }\n\n  [data-popper-placement^=\"right\"] #arrow {\n    left: var(--kemet-tooltip-placement-offset);\n    transform: rotate(-45deg);\n  }\n\n  [data-popper-placement^=\"left\"] #arrow-container {\n    right: 0;\n  }\n\n  [data-popper-placement^=\"left\"] #arrow {\n    right: var(--kemet-tooltip-placement-offset);\n    transform: rotate(135deg);\n  }\n`;\n"],"mappings":";;;;;;;;;;;;;;;;;AAAA,SAAS,YAAY;AACrB,SAAS,qBAAqB;;;ACD9B,SAAS,WAAW;AAEb,IAAM,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ADsC7B,IAAqB,eAArB,cAA0C,YAAY;AAAA,EAGpD,SAAS;AACP,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA,iBAKM,KAAK,WAAW,UAAU,CAAC,UAAsB,KAAK,OAAO,KAAK,IAAI,IAAI;AAAA,iBAC1E,KAAK,WAAW,UAAU,CAAC,UAAyB,KAAK,YAAY,KAAK,IAAI,IAAI;AAAA,qBAC9E,KAAK,WAAW,UAAU,MAAM;AAAE,WAAK,SAAS;AAAA,IAAM,IAAI,IAAI;AAAA,iBAClE,KAAK,WAAW,UAAU,MAAM;AAAE,WAAK,SAAS;AAAA,IAAM,IAAI,IAAI;AAAA,oBAC3D,KAAK,WAAW,UAAU,MAAM;AAAE,WAAK,SAAS;AAAA,IAAO,IAAI,IAAI;AAAA,gBACnE,KAAK,WAAW,UAAU,MAAM;AAAE,WAAK,SAAS;AAAA,IAAO,IAAI,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAM1D,KAAK,WAAW,UAAU,MAAM;AAAE,WAAK,SAAS;AAAA,IAAM,IAAI,IAAI;AAAA,oBAC/D,KAAK,WAAW,UAAU,MAAM;AAAE,WAAK,SAAS;AAAA,IAAO,IAAI,IAAI;AAAA;AAAA,2CAExC,MAAM;AAAE,WAAK,WAAW;AAAG,WAAK,eAAe;AAAA,IAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAM5F;AAAA,EAEA,iBAAiB;AACf,UAAM,SAAS,KAAK,eAAe;AACnC,SAAK,eAAe,MAAM,YAAY,kCAAkC,GAAG,MAAM,IAAI;AAAA,EACvF;AACF;AAnCqB,aACZ,SAAS,CAAC,eAAe,cAAc,kBAAkB,mBAAmB,mBAAmB,kBAAkB,4BAA4B,0BAA0B,kBAAkB,uBAAuB;AADpM,eAArB;AAAA,EADC,cAAc,eAAe;AAAA,GACT;","names":[]}