carbon-custom-elements/es/components/tooltip/tooltip-definition.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-definition.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,EAAiC,UAAU,EAAE,MAAM,aAAa,CAAC;AAOxE;;GAEG;AACH,oBAAY,iBAAiB;IAC3B;;OAEG;IACH,KAAK,UAAU;IAEf;;OAEG;IACH,MAAM,WAAW;IAEjB;;OAEG;IACH,GAAG,QAAQ;CACZ;AAED;;GAEG;AACH,oBAAY,iBAAiB;IAC3B;;OAEG;IACH,IAAI,SAAS;IAEb;;OAEG;IACH,GAAG,QAAQ;IAEX;;OAEG;IACH,KAAK,UAAU;IAEf;;OAEG;IACH,MAAM,WAAW;CAClB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAED;;;;GAIG;AACH,cACM,mBAAoB,SAAQ,wBAAsB;IACtD;;OAEG;IAEH,SAAS,oBAA4B;IAErC;;OAEG;IAEH,QAAQ,SAAM;IAEd;;OAEG;IAEH,SAAS,oBAA4B;IAErC,gBAAgB;IAIhB,MAAM;IAmBN,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,mBAAmB,CAAC","file":"tooltip-definition.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 { classMap } from 'lit-html/directives/class-map';\nimport { html, property, customElement, LitElement } from 'lit-element';\nimport settings from 'carbon-components/es/globals/js/settings';\nimport FocusMixin from '../../globals/mixins/focus';\nimport styles from './tooltip.scss';\n\nconst { prefix } = settings;\n\n/**\n * The alignment choices of tooltip.\n */\nexport enum TOOLTIP_ALIGNMENT {\n  /**\n   * Align the top/left position tooltip body to the one of its trigger button.\n   */\n  START = 'start',\n\n  /**\n   * Align the center position tooltip body to the one of its trigger button.\n   */\n  CENTER = 'center',\n\n  /**\n   * Align the bottom/right position tooltip body to the one of its trigger button.\n   */\n  END = 'end',\n}\n\n/**\n * The direction/positioning/orientation choices of tooltip.\n */\nexport enum TOOLTIP_DIRECTION {\n  /**\n   * Put tooltip body at the left of its trigger button.\n   */\n  LEFT = 'left',\n\n  /**\n   * Put tooltip body at the top of its trigger button.\n   */\n  TOP = 'top',\n\n  /**\n   * Put tooltip body at the right of its trigger button.\n   */\n  RIGHT = 'right',\n\n  /**\n   * Put tooltip body at the bottom of its trigger button.\n   */\n  BOTTOM = 'bottom',\n}\n\n/**\n * Definition tooltip.\n * @element bx-tooltip-definition\n * @slot body - The tooltip body content.\n */\n@customElement(`${prefix}-tooltip-definition`)\nclass BXTooltipDefinition extends FocusMixin(LitElement) {\n  /**\n   * How the tooltip is aligned to the trigger button.\n   */\n  @property()\n  alignment = TOOLTIP_ALIGNMENT.CENTER;\n\n  /**\n   * The text for the tooltip body.\n   */\n  @property({ attribute: 'body-text' })\n  bodyText = '';\n\n  /**\n   * The tooltip direction.\n   */\n  @property()\n  direction = TOOLTIP_DIRECTION.BOTTOM;\n\n  createRenderRoot() {\n    return this.attachShadow({ mode: 'open', delegatesFocus: true });\n  }\n\n  render() {\n    const { alignment, bodyText, direction } = this;\n    const classes = classMap({\n      [`${prefix}--tooltip__trigger`]: true,\n      [`${prefix}--tooltip--a11y`]: true,\n      [`${prefix}--tooltip__trigger--definition`]: true,\n      [`${prefix}--tooltip--${direction}`]: direction,\n      [`${prefix}--tooltip--align-${alignment}`]: alignment,\n    });\n    return html`\n      <button class=\"${classes}\" aria-describedby=\"tooltip-body\">\n        <slot></slot>\n      </button>\n      <div class=\"${prefix}--assistive-text\" id=\"tooltip-body\" role=\"tooltip\">\n        <slot name=\"body\">${bodyText}</slot>\n      </div>\n    `;\n  }\n\n  static styles = styles;\n}\n\nexport default BXTooltipDefinition;\n"]}