carbon-custom-elements/es/components/tooltip/tooltip-body.d.ts.map

A Carbon Design System variant that's as easy to use as native HTML elements, with no framework tax, no framework silo.

{"version":3,"sources":["components/tooltip/tooltip-body.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAIH,OAAO,cAAc,EAAE,EACrB,uBAAuB,EACvB,uBAAuB,EAExB,MAAM,gCAAgC,CAAC;AAKxC;;GAEG;AACH,cACM,aAAc,SAAQ,cAAc;IACxC;;OAEG;IAEH,SAAS,0BAAkC;IAE3C;;OAEG;IAEH,SAAS,0BAAkC;IAE3C;;OAEG;IAEH,IAAI,UAAS;IAEb;;OAEG;IACH,IAAI,QAAQ,kEAoCX;IAED,iBAAiB;IAWjB,MAAM;IAMN,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,aAAa,CAAC","file":"tooltip-body.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2020\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport settings from 'carbon-components/es/globals/js/settings';\nimport { html, property, customElement } from 'lit-element';\nimport BXFloatingMenu, {\n  FLOATING_MENU_ALIGNMENT,\n  FLOATING_MENU_DIRECTION,\n  FLOATING_MENU_POSITION_DIRECTION,\n} from '../floating-menu/floating-menu';\nimport styles from './tooltip.scss';\n\nconst { prefix } = settings;\n\n/**\n * Tooltip body.\n */\n@customElement(`${prefix}-tooltip-body`)\nclass BXTooltipBody extends BXFloatingMenu {\n  /**\n   * How the menu is aligned to the trigger button.\n   */\n  @property()\n  alignment = FLOATING_MENU_ALIGNMENT.CENTER;\n\n  /**\n   * The menu direction.\n   */\n  @property()\n  direction = FLOATING_MENU_DIRECTION.BOTTOM;\n\n  /**\n   * `true` if the dropdown should be open.\n   */\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  /**\n   * The position of this tooltip body.\n   */\n  get position() {\n    const { direction } = this;\n    const position = super.position;\n    const { direction: positionDirection, start, top } = position;\n\n    if (direction === FLOATING_MENU_DIRECTION.LEFT) {\n      const style = this.ownerDocument!.defaultView!.getComputedStyle(this);\n      const margin = Number(\n        (/^([\\d-.]+)px$/.exec(\n          style.getPropertyValue(positionDirection !== FLOATING_MENU_POSITION_DIRECTION.RTL ? 'margin-right' : 'margin-left')\n        ) || [])[1]\n      );\n      if (!isNaN(margin)) {\n        // For direction === DIRECTION_RIGHT, the left/top margin the caret size effectively adjusts the position,\n        // but for direction === DIRECTION_LEFT such thing won't happen\n        return {\n          ...position,\n          start: start - margin,\n        };\n      }\n    }\n\n    if (direction === FLOATING_MENU_DIRECTION.TOP) {\n      const style = this.ownerDocument!.defaultView!.getComputedStyle(this);\n      const margin = Number((/^([\\d-.]+)px$/.exec(style.getPropertyValue('margin-bottom')) || [])[1]);\n      if (!isNaN(margin)) {\n        // For direction === DIRECTION_BOTTOM, the left/top margin the caret size effectively adjusts the position,\n        // but for direction === DIRECTION_TOP such thing won't happen\n        return {\n          ...position,\n          top: top - margin,\n        };\n      }\n    }\n\n    return position;\n  }\n\n  connectedCallback() {\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'menu');\n    }\n    if (!this.hasAttribute('tabindex')) {\n      // TODO: Should we use a property?\n      this.setAttribute('tabindex', '-1');\n    }\n    super.connectedCallback();\n  }\n\n  render() {\n    return html`\n      <span class=\"${prefix}--tooltip__caret\"></span><slot></slot>\n    `;\n  }\n\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default BXTooltipBody;\n"]}