@tmorrow/cre8-wc 1.2.4 → 1.2.5

package/lib/components/tooltip/tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../components/tooltip/tooltip.ts"],"names":[],"mappings":"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","sourcesContent":["import { html,  } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { nanoid } from 'nanoid';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './tooltip.styles.js';\n\n/**\n * The purpose of tooltips is to provide a tip or hint about what a tool, icon, link, or other interaction does.\n * If you need to present a call to action with perhaps a button for the user to click, then use\n * [Popover](/docs/cre8-components-popover--docs) instead.\n *\n * ##Tooltip Styles\n * There are 4 alignment options for Tooltips: Top, Bottom, Right, and Left. Default placement is Bottom, below the\n * element it is describing. Top or Bottom alignment are the the preferred placement, particularly on screens that\n * have a more narrow viewport. Tooltips utilize Global styles and are not affected by brand themes.\n *\n * **With icon**\n * - **iconRotateDegree** & **iconFlipDirection** props are optional.\n * - They are used to set up the correct dirrection for icons, for example,\n * arrows, caret up or caret down.\n *\n * ##Usability Considerations\n * With the exception of icons - which should always have alt text at a minimum - the UI should never rely on\n * Tooltips for clarity, especially because they are not always discovered by the user. If the user cannot\n * intuitively understand the interface without Tooltips, the interface should be redesigned.\n *\n * ##How to use\n * - Use Tooltips to clarify the UI element the user is interacting with, not to add additional content on the page.\n * Also, do not simply restate content on the page, for example, the title of the field.\n * - Tooltips should be short and to the point. Example: \"Click X to do X\" or \"Icon Description.\" If a succinct\n * description is not possible, the interaction element should be redesigned.\n * - In a mouse-driven UI, Tooltips are triggered on hover (mouseover) and dismissed (disappear)\n * when the user mouses away from the element. In touch UIs, a Tooltip is triggered by tapping\n * and holding an item. The Tooltip is displayed as long as the user continues to hold the element.\n * Tap and hold is a more advanced user behavior, and further reason for not relying on Tooltips.\n * A novice user may never discover tap and hold for Tooltips.\n *\n * @slot default - Default, unnamed slot container for Tooltip text\n * @slot trigger - Named slot container for Tooltip element to trigger showing/hiding the Tooltip text\n */\n\nexport class Cre8Tooltip extends Cre8Element {\n    static styles = [styles];\n\n  /**\n   * Positions the tooltip panel absolutely to the icon. Position overrides `isDynamic`.\n   * @type {\"default\"|\"top\"|\"left\"|\"right\"}\n   * @attr {string}\n   * - **default** positions the tooltip panel below the trigger element\n   * - **top** positions the tooltip panel above the trigger element\n   * - **left** positions the tooltip panel left of the trigger element\n   * - **right** positions the tooltip panel right of the trigger element\n   */\n  @property()\n      position?: 'top' | 'left' | 'right';\n\n  /**\n   * The knockout variant for the tooltip\n   * @attr {boolean}\n   * 1. If is true, the tooltip background is white\n   * 2. If is false, the tooltip background is gray\n   */\n  @property({ type: Boolean, reflect: true })\n      knockout?: boolean;\n\n  /**\n   * The dynamic state for the tooltip. Position overrides isDynamic.\n   * @attr {boolean}\n   * - If true, the tooltip panel placement is determined by its position in the viewport\n   * - If false, the tooltip panel placement will be placed according to the position value\n   */\n  @property({ type: Boolean, reflect: true })\n      isDynamic?: boolean;\n\n  /**\n   * The dynamic active state\n   * @attr {boolean}\n   * <br/><br/> _*This property is dynamically set_\n   */\n  @property({ type: Boolean })\n      isActiveDynamic?: boolean;\n\n  /**\n   * The active state for the tooltip\n   * @attr {boolean}\n   * - If true, the tooltip panel is visible\n   * - If false, the tooltip panel is hidden\n   * <br/><br/> _*This property is dynamically set_\n   */\n  @property({ type: Boolean, reflect: true })\n      isActive?: boolean;\n\n  /**\n   *  Accepts the ID string of the item the tooltip is referencing\n   *  @attr {string}\n   *  Dynmically appends its own ID to the aria-describedby attribute on the referenced element\n   */\n  @property({ type: String })\n      ariaDescribes?: string;\n\n  @property({ type: String })\n      _uniqueId?: string;\n\n  /**\n   * svg as a raw string\n   * - The icon is defined by this prop.\n   * - Pass in a raw svg as a String for using <cre8-icon>\n   */\n  @property()\n      svg?: string;\n\n  /**\n   * iconRotateDegree is used for <cre8-icon> to set the arrow in the correct direction\n   */\n  @property({ type: Number })\n      iconRotateDegree?: number = 0;\n\n  /**\n   * iconFlipDirection is used for <cre8-icon> to set the icon in the correct direction\n   */\n  @property()\n      iconFlipDirection?: string;\n\n  /**\n   * Query the tooltip panel element\n   */\n  @query('.cre8-c-tooltip')\n      _Cre8Tooltip: HTMLElement;\n\n  /**\n   * Query the tooltip panel element\n   */\n  @query('.cre8-c-tooltip__panel')\n      _Cre8TooltipPanel: HTMLElement;\n\n  /**\n   * Query the document direction value\n   * <br/><br/> _*This property is dynamically set_\n   */\n  get isRTL() {\n      return document.dir === 'rtl';\n  }\n\n  /**\n   * updated Callback Lifecycle\n   * 1. Find the second slot\n   * 2. Create a string from joining the textContent of the textnodes\n   * 3. Set the textContent of the tip generated in the firstUpdated lifecycle callback\n   * */\n  updated() {\n    /* 1 & 2 */\n      const tipContent = this.shadowRoot.querySelectorAll('slot')[1]\n          .assignedNodes()\n          .reduce(\n              ((str, item) => `${str}${item.textContent.replace(/\\n/g, '').trim()}`),\n              ''\n          );\n    /* 3 */\n      if (document.getElementById(this._uniqueId)) {\n          document.getElementById(this._uniqueId).textContent = tipContent;\n      }\n  }\n\n  /**\n   * firstUpdated Callback Lifecycle\n   * 1. If ariaDescribes is set\n      * a. create an ID and assign it to the property _uniqueId\n      * b. Generate an empty div, assign it the  _uniqueId and the tooltip role\n  * 2. Set the aria-describedby on the ariaDescribes target\n  */\n  firstUpdated() {\n      if (this.ariaDescribes) { /* 1 */\n          this._uniqueId = this._uniqueId || nanoid(); /* 1.a */\n          const idMatcher = new RegExp(`\\\\b${this._uniqueId}\\\\b`); // prevents dupes from reconnects below\n      /* 1.b */\n          const a11yProxy = document.createElement('div');\n          a11yProxy.setAttribute('role', 'tooltip');\n          a11yProxy.setAttribute('style', 'position:fixed; left: -1000px; top: -1000px;');\n          a11yProxy.id = this._uniqueId;\n          const describedEl = document.getElementById(this.ariaDescribes);\n          describedEl.parentNode.insertBefore(a11yProxy, describedEl);\n          const idList = describedEl?.getAttribute('aria-describedBy');\n      /* 2 */\n          describedEl?.setAttribute(\n              'aria-describedby',\n              `${idList ? `${idList.replace(idMatcher, '')} ` : ''}${this._uniqueId}`.trim()\n          );\n      }\n  }\n\n  /**\n   * Connected Callback Lifecycle\n   * 1. Add window mouseover event listener\n   * 2. Add window mouseout event listener\n   * 3. Add mousedown event listener\n   * 4. Set the id and aria-describedby\n   */\n  connectedCallback() {\n      super.connectedCallback();\n      this.addEventListener('mouseover', this.toggleActive); /* 1 */\n      this.addEventListener('mouseout', this.removeActive); /* 2 */\n  }\n\n  /**\n   * Disconnected Callback Lifecycle\n   * 1. Remove window mouseover event listener\n   * 2. Remove window mouseout event listener\n   */\n  disconnectedCallback() {\n      super.disconnectedCallback();\n      this.removeEventListener('mouseover', this.toggleActive); /* 1 */\n      this.removeEventListener('mouseout', this.removeActive); /* 2 */\n  }\n\n  /**\n   * Handle all dynamic placement\n   */\n  dynamicPosition() {\n    // TODO: Temporarily keep eslint complexity as warning. Update during specific story for this rule.\n    /* eslint complexity: [\"warn\", 10] */\n      if (this.isDynamic && this._Cre8TooltipPanel) {\n          const body = document.querySelector('body').getBoundingClientRect();\n          const tooltipPanel = this._Cre8TooltipPanel.getBoundingClientRect();\n          const tooltipHeight = this._Cre8Tooltip.clientHeight + tooltipPanel.height + tooltipPanel.top;\n\n      /**\n       * If tooltip panel breaks out the left side of the window, position it to the right\n       */\n          if (tooltipPanel.left < 0) {\n              this.position = this.isRTL ? 'left' : 'right';\n          }\n\n      /**\n       * If tooltip panel breaks out the right side of the window, position it to the left\n       */\n          if (tooltipPanel.right >= body.width) {\n              this.position = this.isRTL ? 'right' : 'left';\n          }\n\n      /**\n       * If tooltip panel breaks out the top side of the window only, position it to the bottom center\n       */\n          if (tooltipPanel.top < 0 && tooltipPanel.left > 0 && tooltipPanel.right < body.width) {\n              this.position = null;\n          }\n\n      /**\n       * If tooltip panel breaks out the bottom side of the window only, position it to the top center\n       */\n          if (\n              tooltipHeight >= window.innerHeight\n        && tooltipPanel.bottom >= window.innerHeight\n        && tooltipPanel.left >= 0\n        && tooltipPanel.right <= body.width\n          ) {\n              this.position = 'top';\n          }\n      }\n  }\n\n  /**\n   * Handle Keydown\n   * 1. If escape or tab key is struck when the tooltip is active, close it\n   * 2. If enter or escape is keyed, toggle the tooltip open or close.\n   *    We need these since the click event is on a div so that accessibility reads this aloud to a user\n   */\n  private _handleKeydown(e: KeyboardEvent) {\n      if (this.isActive) {\n          if (e.code === 'Escape' || e.code === 'Tab') {\n              this.toggleActive(); /* 1 */\n          }\n      }\n      if (e.code === 'Enter' || e.code === 'Space') {\n          this.toggleActive(); /* 2 */\n      }\n  }\n\n  /**\n   * Set Tooltip Active State\n   * 1. Toggle the active state between true and false\n   * 2. If is active, set the dynamic position and custom event.\n   * 3. If is not active, remove fire the close custom event.\n   * 4. Toggle the active state for dynamic. This prevents a flash of the tooltip in the orginal position.\n   */\n  toggleActive() {\n      this.isActive = !this.isActive; /* 1 */\n\n      if (this.isActive) {\n      /* 2 */\n          setTimeout(() => {\n              this.dynamicPosition();\n          }, 1);\n          this.dispatchEvent(new CustomEvent('open', {\n              detail: { isActive: this.isActive }, bubbles: true, composed: true,\n          }));\n      } else {\n      /* 3 */\n          this.dispatchEvent(new CustomEvent('close', {\n              detail: { isActive: this.isActive }, bubbles: true, composed: true,\n          }));\n      }\n\n    /* 4 */\n      setTimeout(() => {\n          if (this.isActive && this.isDynamic) {\n              this.isActiveDynamic = true;\n          } else {\n              this.isActiveDynamic = false;\n          }\n      }, 2);\n  }\n\n  /**\n   * Remove Active State\n   * 1. If a specific event is fired, remove the active state.\n   */\n  removeActive = () => {\n      if (this.isActive) {\n          this.toggleActive();\n      }\n  };\n\n  render() {\n      const componentClassNames = this.componentClassNames('cre8-c-tooltip', {\n          'cre8-c-tooltip--top': this.position === 'top',\n          'cre8-c-tooltip--left': this.position === 'left',\n          'cre8-c-tooltip--right': this.position === 'right',\n          'cre8-c-tooltip--knockout': this.knockout,\n          'cre8-is-active': this.isActive,\n          'cre8-is-dynamic': this.isDynamic,\n          'cre8-is-dynamic-active': this.isActiveDynamic,\n      });\n\n      return html`\n        <div class=\"${componentClassNames}\">\n            <div \n                class=\"cre8-c-tooltip__trigger\"\n                tabindex=\"0\"\n                @focus=${this.toggleActive}\n                @keydown=${this._handleKeydown}\n            >\n                ${this.svg\n        ? html`\n            <slot name=\"trigger\">\n                <cre8-icon svg='${this.svg}' rotate=\"${Number(this.iconRotateDegree)}\" \n                flip=\"${this.iconFlipDirection}\" aria-hidden=\"true\"></cre8-icon>\n            </slot>`\n        : html`<slot name=\"trigger\"></slot>`\n}\n            </div>\n            <dialog\n                id=${ifDefined(this._uniqueId)}\n                aria-labelledby=${this.ariaDescribes}\n                class=\"cre8-c-tooltip__panel\"\n                role=\"tooltip\">\n                <slot></slot>\n            </dialog>\n        </div>\n      `;\n  }\n}\n\nif (customElements.get('cre8-tooltip') === undefined) {\n    customElements.define('cre8-tooltip', Cre8Tooltip);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-tooltip': Cre8Tooltip;\n  }\n}\n\nexport default Cre8Tooltip;\n"]}

package/lib/components/tooltip/tooltip.styles.d.ts

@@ -0,0 +1,3 @@
+declare const styles: import("lit").CSSResult;
+export default styles;
+//# sourceMappingURL=tooltip.styles.d.ts.map

package/lib/components/tooltip/tooltip.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.styles.d.ts","sourceRoot":"","sources":["../../../components/tooltip/tooltip.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBA4wBV,CAAC;AACH,eAAe,MAAM,CAAC"}