carbon-custom-elements
Version:
A Carbon Design System variant that's as easy to use as native HTML elements, with no framework tax, no framework silo.
1 lines • 4.1 kB
Source Map (JSON)
{"version":3,"sources":["components/tooltip/tooltip.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,EAAwC,UAAU,EAAE,MAAM,aAAa,CAAC;AAM/E,OAAO,qBAAqB,MAAM,wCAAwC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAK3E;;;GAGG;AACH,cACM,SAAU,SAAQ,cAA8B,YAAW,qBAAqB;IACpF;;OAEG;IACH,OAAO,CAAC,SAAS,CAA+B;IAEhD;;OAEG;IAEH,OAAO,CAAC,YAAY,CAAe;IAEnC;;OAEG;IAGH,OAAO,CAAC,YAAY,CAQlB;IAEF;;OAEG;IAEH,IAAI,UAAS;IAEb;;OAEG;IACH,IAAI,eAAe,YAMlB;IAED,iBAAiB;IAoBjB,OAAO,CAAC,iBAAiB,KAAA;IAYzB,MAAM;IAON,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,SAAS,CAAC","file":"tooltip.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, query, customElement, LitElement } from 'lit-element';\nimport Information16 from '@carbon/icons/lib/information/16';\nimport HostListener from '../../globals/decorators/host-listener';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport { find } from '../../globals/internal/collection-helpers';\nimport BXFloatingMenu from '../floating-menu/floating-menu';\nimport BXFloatingMenuTrigger from '../floating-menu/floating-menu-trigger';\nimport styles from './tooltip.scss';\n\nconst { prefix } = settings;\n\n/**\n * Trigger button of tooltip.\n * @element bx-tooltip\n */\n@customElement(`${prefix}-tooltip`)\nclass BXTooltip extends HostListenerMixin(LitElement) implements BXFloatingMenuTrigger {\n /**\n * The menu body.\n */\n private _menuBody: BXFloatingMenu | null = null;\n\n /**\n * The trigger button.\n */\n @query('#trigger')\n private _triggerNode!: HTMLElement;\n\n /**\n * Handles `click` event on this element.\n */\n @HostListener('click')\n // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n private _handleClick = async () => {\n this.open = !this.open;\n const { open, updateComplete } = this;\n if (open) {\n await updateComplete;\n const { _menuBody: menuBody } = this;\n menuBody?.focus();\n }\n };\n\n /**\n * `true` if the dropdown should be open.\n */\n @property({ type: Boolean, reflect: true })\n open = false;\n\n /**\n * @returns The position of the trigger button in the viewport.\n */\n get triggerPosition() {\n const { _triggerNode: triggerNode } = this;\n if (!triggerNode) {\n throw new TypeError('Cannot find the trigger button.');\n }\n return triggerNode.getBoundingClientRect();\n }\n\n connectedCallback() {\n if (!this.hasAttribute('role')) {\n this.setAttribute('role', 'button');\n }\n if (!this.hasAttribute('tabindex')) {\n // TODO: Should we use a property?\n this.setAttribute('tabindex', '0');\n }\n if (!this.hasAttribute('aria-haspopup')) {\n this.setAttribute('aria-haspopup', 'true');\n }\n if (!this.hasAttribute('aria-expanded')) {\n this.setAttribute('aria-expanded', 'false');\n }\n if (!this.shadowRoot) {\n this.attachShadow({ mode: 'open' });\n }\n super.connectedCallback();\n }\n\n updated(changedProperties) {\n if (changedProperties.has('open')) {\n if (!this._menuBody) {\n this._menuBody = find(this.childNodes, elem => (elem.constructor as typeof BXFloatingMenu).FLOATING_MENU);\n }\n if (this._menuBody) {\n this._menuBody.open = this.open;\n }\n this.setAttribute('aria-expanded', String(Boolean(this.open)));\n }\n }\n\n render() {\n return html`\n ${Information16({ id: 'trigger' })}\n <slot></slot>\n `;\n }\n\n static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default BXTooltip;\n"]}