@felleslosninger/minid-elements 0.0.97 → 0.0.99

package/dist/components/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","sources":["../../src/components/tooltip.component.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { styled } from '../mixins/tailwind.mixin.js';\nimport './popup.component';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { MinidPopup } from './popup.component';\nimport { watch } from '../internal/watch.js';\nimport {\n  animateTo,\n  parseDuration,\n  stopAnimations,\n} from '../internal/animate.js';\nimport {\n  getAnimation,\n  setDefaultAnimation,\n} from '../utilities/animation-registry.js';\nimport { waitForEvent } from '../internal/event.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-tooltip': MinidTooltip;\n  }\n}\n\nconst styles = [\n  css`\n    :host {\n      --max-width: 20rem;\n      --hide-delay: 0ms;\n      --show-delay: 250ms;\n    }\n\n    .tooltip__body {\n      width: max-content;\n      max-width: var(--max-width);\n    }\n\n    .tooltip {\n      --arrow-color: var(--fds-semantic-surface-neutral-inverted);\n    }\n\n    .tooltip.inverted {\n      --arrow-color: var(--fds-semantic-surface-neutral-subtle);\n    }\n  `,\n];\n\n/**\n * @event mid-show - Emitted when open is set to `true`\n * @event mid-hide - Emitted when open is set to `false`\n * @event mid-after-show - Emitted after the tooltip has shown an all animations are complete\n * @event mid-after-hide - Emitted after the tooltip has hidden an all animations are complete\n *\n * @slot -- The default slot is for the trigger element\n * @slot content - The content to render in the tooltip. Alternatively, you can use the `content` attribute.\n *\n * @csspart base - The component base wrapper. `<mid-popup> element\n * @csspart body - The tooltip body, where the content is rendered\n *\n * @cssproperty [--max-width=20rem] - Max width of the tooltip content\n * @cssproperty [--hide-delay=0ms] - Delay for hiding the tooltip\n * @cssproperty [--show-delay=150ms] - Delay for showing the tooltip\n */\n@customElement('mid-tooltip')\nexport class MinidTooltip extends styled(LitElement, styles) {\n  /**\n   * @ignore\n   */\n  private hoverTimeout?: number;\n  /**\n   * @ignore\n   */\n  private closeWatcher: CloseWatcher | null = null;\n\n  /**\n   * @ignore\n   */\n  @query('slot:not([name])')\n  defaultSlot!: HTMLSlotElement;\n\n  /**\n   * @ignore\n   */\n  @query('.tooltip__body')\n  body!: HTMLElement;\n\n  /**\n   * @ignore\n   */\n  @query('mid-popup')\n  popup!: MinidPopup;\n\n  /**\n   * The text to render in the tooltip. If you need HTML you can use the content slot\n   */\n  @property()\n  content = '';\n\n  /**\n   * Controls how the tooltip is activated. When manual is used, the tooltip must be activated\n   * programmatically.\n   */\n  @property({ type: String })\n  trigger: 'focus hover' | 'hover' | 'focus' | 'manual' | 'click' =\n    'focus hover';\n\n  @property() placement:\n    | 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end' = 'top';\n\n  /**\n   * Disables the tooltip so it won't show when triggered.\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * The distance in pixels from which to offset the tooltip away from its target.\n   */\n  @property({ type: Number })\n  distance = 8;\n\n  /**\n   * Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods.\n   */\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  /**\n   * The distance in pixels from which to offset the tooltip along its target.\n   */\n  @property({ type: Number })\n  skidding = 0;\n\n  /**\n   * Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with\n   * `overflow: auto|hidden|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all,\n   * scenarios.\n   */\n  @property({ type: Boolean })\n  hoist = false;\n\n  /**\n   * Inverts the color of the tooltip. Use this on dark backgrounds.\n   */\n  @property({ type: Boolean })\n  inverted = false;\n\n  constructor() {\n    super();\n    this.addEventListener('blur', this.handleBlur, true);\n    this.addEventListener('focus', this.handleFocus, true);\n    this.addEventListener('click', this.handleClick);\n    this.addEventListener('mouseover', this.handleMouseOver);\n    this.addEventListener('mouseout', this.handleMouseOut);\n  }\n\n  disconnectedCallback() {\n    // Cleanup this event in case the tooltip is removed while open\n    this.closeWatcher?.destroy();\n    document.removeEventListener('keydown', this.handleDocumentKeyDown);\n  }\n\n  firstUpdated() {\n    this.body.hidden = !this.open;\n\n    // If the tooltip is visible on init, update its position\n    if (this.open) {\n      this.popup.active = true;\n      this.popup.reposition();\n    }\n  }\n\n  /**\n   * @ignore\n   */\n  private handleBlur = () => {\n    if (this.hasTrigger('focus')) {\n      this.hide();\n    }\n  };\n\n  /**\n   * @ignore\n   */\n  private handleClick = () => {\n    if (this.hasTrigger('click')) {\n      if (this.open) {\n        this.hide();\n      } else {\n        this.show();\n      }\n    }\n  };\n\n  /**\n   * @ignore\n   */\n  private handleFocus = () => {\n    if (this.hasTrigger('focus')) {\n      this.show();\n    }\n  };\n\n  /**\n   * @ignore\n   */\n  private handleDocumentKeyDown = (event: KeyboardEvent) => {\n    // Pressing escape when a tooltip is open should dismiss it\n    if (event.key === 'Escape') {\n      event.stopPropagation();\n      this.hide();\n    }\n  };\n\n  /**\n   * @ignore\n   */\n  private handleMouseOver = () => {\n    if (this.hasTrigger('hover')) {\n      const delay = parseDuration(\n        getComputedStyle(this).getPropertyValue('--show-delay')\n      );\n      clearTimeout(this.hoverTimeout);\n      this.hoverTimeout = window.setTimeout(() => this.show(), delay);\n    }\n  };\n\n  /**\n   * @ignore\n   */\n  private handleMouseOut = () => {\n    if (this.hasTrigger('hover')) {\n      const delay = parseDuration(\n        getComputedStyle(this).getPropertyValue('--hide-delay')\n      );\n      clearTimeout(this.hoverTimeout);\n      this.hoverTimeout = window.setTimeout(() => this.hide(), delay);\n    }\n  };\n\n  /**\n   * @ignore\n   */\n  private hasTrigger(triggerType: string) {\n    const triggers = this.trigger.split(' ');\n    return triggers.includes(triggerType);\n  }\n\n  @watch('open', { waitUntilFirstUpdate: true })\n  async handleOpenChange() {\n    if (this.open) {\n      if (this.disabled) {\n        return;\n      }\n\n      // Show\n      this.dispatchEvent(\n        new Event('mid-show', { bubbles: true, composed: true })\n      );\n      if ('CloseWatcher' in window) {\n        this.closeWatcher?.destroy();\n        this.closeWatcher = new CloseWatcher();\n        this.closeWatcher.onclose = () => {\n          this.hide();\n        };\n      } else {\n        document.addEventListener('keydown', this.handleDocumentKeyDown);\n      }\n\n      await stopAnimations(this.body);\n      this.body.hidden = false;\n      this.popup.active = true;\n      const { keyframes, options } = getAnimation(this, 'tooltip.show');\n      await animateTo(this.popup.popup, keyframes, options);\n      this.popup.reposition();\n\n      this.dispatchEvent(\n        new Event('mid-after-show', { bubbles: true, composed: true })\n      );\n    } else {\n      // Hide\n      this.dispatchEvent(\n        new Event('mid-hide', { bubbles: true, composed: true })\n      );\n      this.closeWatcher?.destroy();\n      document.removeEventListener('keydown', this.handleDocumentKeyDown);\n\n      await stopAnimations(this.body);\n      const { keyframes, options } = getAnimation(this, 'tooltip.hide');\n      await animateTo(this.popup.popup, keyframes, options);\n      this.popup.active = false;\n      this.body.hidden = true;\n\n      this.dispatchEvent(\n        new Event('mid-after-hide', { bubbles: true, composed: true })\n      );\n    }\n  }\n\n  @watch(['content', 'distance', 'hoist', 'placement', 'skidding'])\n  async handleOptionsChange() {\n    if (this.hasUpdated) {\n      await this.updateComplete;\n      this.popup.reposition();\n    }\n  }\n\n  @watch('disabled')\n  handleDisabledChange() {\n    if (this.disabled && this.open) {\n      this.hide();\n    }\n  }\n\n  /**\n   * Shows the tooltip.\n   */\n  async show() {\n    if (this.open) {\n      return undefined;\n    }\n\n    this.open = true;\n    return waitForEvent(this, 'mid-after-show');\n  }\n\n  /**\n   * Hides the tooltip\n   */\n  async hide() {\n    if (!this.open) {\n      return undefined;\n    }\n\n    this.open = false;\n    return waitForEvent(this, 'mid-after-hide');\n  }\n\n  override render() {\n    return html`\n      <mid-popup\n        role=\"tooltip\"\n        ?active=${this.open}\n        part=\"base\"\n        exportparts=\"\n          popup:base__popup,\n          arrow:base__arrow\n        \"\n        class=${classMap({\n          tooltip: true,\n          inverted: this.inverted,\n          'tooltip--open': this.open,\n        })}\n        placement=${this.placement}\n        distance=${this.distance}\n        skidding=${this.skidding}\n        strategy=${this.hoist ? 'fixed' : 'absolute'}\n        flip\n        shift\n        arrow\n        hover-bridge\n      >\n        <slot slot=\"anchor\"></slot>\n        <div\n          part=\"body\"\n          id=\"tooltip\"\n          class=\"${classMap({\n            'fds-tooltip': true,\n            tooltip__body: true,\n            'fds-tooltip--inverted': this.inverted,\n          })}\"\n          role=\"tooltip\"\n          aria-live=${this.open ? 'polite' : 'off'}\n        >\n          <slot name=\"content\">${this.content}</slot>\n        </div>\n      </mid-popup>\n    `;\n  }\n}\n\nsetDefaultAnimation('tooltip.show', {\n  keyframes: [\n    { opacity: 0, scale: 0.8 },\n    { opacity: 1, scale: 1 },\n  ],\n  options: { duration: 150, easing: 'ease' },\n});\n\nsetDefaultAnimation('tooltip.hide', {\n  keyframes: [\n    { opacity: 1, scale: 1 },\n    { opacity: 0, scale: 0.8 },\n  ],\n  options: { duration: 150, easing: 'ease' },\n});\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"tooltip.js","sources":["../../src/components/tooltip.component.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { styled } from '../mixins/tailwind.mixin.js';\nimport './popup.component';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { MinidPopup } from './popup.component';\nimport { watch } from '../internal/watch.js';\nimport {\n  animateTo,\n  parseDuration,\n  stopAnimations,\n} from '../internal/animate.js';\nimport {\n  getAnimation,\n  setDefaultAnimation,\n} from '../utilities/animation-registry.js';\nimport { waitForEvent } from '../internal/event.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-tooltip': MinidTooltip;\n  }\n}\n\nconst styles = [\n  css`\n    :host {\n      --max-width: 20rem;\n      --hide-delay: 0ms;\n      --show-delay: 250ms;\n    }\n  `,\n];\n\n/**\n * @event mid-show - Emitted when open is set to `true`\n * @event mid-hide - Emitted when open is set to `false`\n * @event mid-after-show - Emitted after the tooltip has shown an all animations are complete\n * @event mid-after-hide - Emitted after the tooltip has hidden an all animations are complete\n *\n * @slot -- The default slot is for the trigger element\n * @slot content - The content to render in the tooltip. Alternatively, you can use the `content` attribute.\n *\n * @csspart base - The component base wrapper. `<mid-popup> element\n * @csspart body - The tooltip body, where the content is rendered\n *\n * @method show - Shows the tooltip\n * @method hide - Hides the tooltip\n *\n * @cssproperty [--max-width=20rem] - Max width of the tooltip content\n * @cssproperty [--hide-delay=0ms] - Delay for hiding the tooltip\n * @cssproperty [--show-delay=150ms] - Delay for showing the tooltip\n */\n@customElement('mid-tooltip')\nexport class MinidTooltip extends styled(LitElement, styles) {\n  private hoverTimeout?: number;\n  private closeWatcher: CloseWatcher | null = null;\n\n  @query('#body')\n  body!: HTMLElement;\n\n  @query('mid-popup')\n  popup!: MinidPopup;\n\n  /**\n   * The text to render in the tooltip. If you need HTML you can use the content slot\n   */\n  @property()\n  content = '';\n\n  /**\n   * Controls how the tooltip is activated. When manual is used, the tooltip must be activated\n   * programmatically.\n   */\n  @property({ type: String })\n  trigger: 'focus hover' | 'hover' | 'focus' | 'manual' | 'click' =\n    'focus hover';\n\n  @property() placement:\n    | 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end' = 'top';\n\n  @property()\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  /**\n   * Disables the tooltip so it won't show when triggered.\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * The distance in pixels from which to offset the tooltip away from its target.\n   */\n  @property({ type: Number })\n  distance = 8;\n\n  /**\n   * Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods.\n   */\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  /**\n   * The distance in pixels from which to offset the tooltip along its target.\n   */\n  @property({ type: Number })\n  skidding = 0;\n\n  /**\n   * Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with\n   * `overflow: auto|hidden|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all,\n   * scenarios.\n   */\n  @property({ type: Boolean })\n  hoist = false;\n\n  /**\n   * Inverts the color of the tooltip. Use this on dark backgrounds.\n   */\n  @property({ type: Boolean })\n  inverted = false;\n\n  constructor() {\n    super();\n    this.addEventListener('blur', this.handleBlur, true);\n    this.addEventListener('focus', this.handleFocus, true);\n    this.addEventListener('click', this.handleClick);\n    this.addEventListener('mouseover', this.handleMouseOver);\n    this.addEventListener('mouseout', this.handleMouseOut);\n  }\n\n  disconnectedCallback() {\n    // Cleanup this event in case the tooltip is removed while open\n    this.closeWatcher?.destroy();\n    document.removeEventListener('keydown', this.handleDocumentKeyDown);\n  }\n\n  firstUpdated() {\n    this.body.hidden = !this.open;\n\n    // If the tooltip is visible on init, update its position\n    if (this.open) {\n      this.popup.active = true;\n      this.popup.reposition();\n    }\n  }\n\n  private handleBlur = () => {\n    if (this.hasTrigger('focus')) {\n      this.hide();\n    }\n  };\n\n  private handleClick = () => {\n    if (this.hasTrigger('click')) {\n      if (this.open) {\n        this.hide();\n      } else {\n        this.show();\n      }\n    }\n  };\n\n  private handleFocus = () => {\n    if (this.hasTrigger('focus')) {\n      this.show();\n    }\n  };\n\n  private handleDocumentKeyDown = (event: KeyboardEvent) => {\n    // Pressing escape when a tooltip is open should dismiss it\n    if (event.key === 'Escape') {\n      event.stopPropagation();\n      this.hide();\n    }\n  };\n\n  private handleMouseOver = () => {\n    if (this.hasTrigger('hover')) {\n      const delay = parseDuration(\n        getComputedStyle(this).getPropertyValue('--show-delay')\n      );\n      clearTimeout(this.hoverTimeout);\n      this.hoverTimeout = window.setTimeout(() => this.show(), delay);\n    }\n  };\n\n  private handleMouseOut = () => {\n    if (this.hasTrigger('hover')) {\n      const delay = parseDuration(\n        getComputedStyle(this).getPropertyValue('--hide-delay')\n      );\n      clearTimeout(this.hoverTimeout);\n      this.hoverTimeout = window.setTimeout(() => this.hide(), delay);\n    }\n  };\n\n  private hasTrigger(triggerType: string) {\n    const triggers = this.trigger.split(' ');\n    return triggers.includes(triggerType);\n  }\n\n  @watch('open', { waitUntilFirstUpdate: true })\n  async handleOpenChange() {\n    if (this.open) {\n      if (this.disabled) {\n        return;\n      }\n\n      // Show\n      this.dispatchEvent(\n        new Event('mid-show', { bubbles: true, composed: true })\n      );\n      if ('CloseWatcher' in window) {\n        this.closeWatcher?.destroy();\n        this.closeWatcher = new CloseWatcher();\n        this.closeWatcher.onclose = () => {\n          this.hide();\n        };\n      } else {\n        document.addEventListener('keydown', this.handleDocumentKeyDown);\n      }\n\n      await stopAnimations(this.body);\n      this.body.hidden = false;\n      this.popup.active = true;\n      const { keyframes, options } = getAnimation(this, 'tooltip.show');\n      await animateTo(this.popup.popup, keyframes, options);\n      this.popup.reposition();\n\n      this.dispatchEvent(\n        new Event('mid-after-show', { bubbles: true, composed: true })\n      );\n    } else {\n      // Hide\n      this.dispatchEvent(\n        new Event('mid-hide', { bubbles: true, composed: true })\n      );\n      this.closeWatcher?.destroy();\n      document.removeEventListener('keydown', this.handleDocumentKeyDown);\n\n      await stopAnimations(this.body);\n      const { keyframes, options } = getAnimation(this, 'tooltip.hide');\n      await animateTo(this.popup.popup, keyframes, options);\n      this.popup.active = false;\n      this.body.hidden = true;\n\n      this.dispatchEvent(\n        new Event('mid-after-hide', { bubbles: true, composed: true })\n      );\n    }\n  }\n\n  @watch(['content', 'distance', 'hoist', 'placement', 'skidding'])\n  async handleOptionsChange() {\n    if (this.hasUpdated) {\n      await this.updateComplete;\n      this.popup.reposition();\n    }\n  }\n\n  @watch('disabled')\n  handleDisabledChange() {\n    if (this.disabled && this.open) {\n      this.hide();\n    }\n  }\n\n  /**\n   * Shows the tooltip.\n   */\n  async show() {\n    if (this.open) {\n      return undefined;\n    }\n\n    this.open = true;\n    return waitForEvent(this, 'mid-after-show');\n  }\n\n  /**\n   * Hides the tooltip\n   */\n  async hide() {\n    if (!this.open) {\n      return undefined;\n    }\n\n    this.open = false;\n    return waitForEvent(this, 'mid-after-hide');\n  }\n\n  override render() {\n    return html`\n      <mid-popup\n        role=\"tooltip\"\n        ?active=${this.open}\n        part=\"base\"\n        class=\"${classMap({\n          '[--arrow-color:var(--color-neutral-base)]': !this.inverted,\n          '[--arrow-color:var(--color-neutral-surface)]': this.inverted,\n          'text-body-sm': this.size === 'sm',\n          'text-body-md': this.size === 'md',\n          'text-body-lg': this.size === 'lg',\n        })}\"\n        placement=${this.placement}\n        distance=${this.distance}\n        skidding=${this.skidding}\n        strategy=${this.hoist ? 'fixed' : 'absolute'}\n        flip\n        shift\n        arrow\n        hover-bridge\n      >\n        <slot slot=\"anchor\"></slot>\n        <div\n          part=\"body\"\n          id=\"body\"\n          class=\"${classMap({\n            'bg-neutral': this.inverted,\n            'text-neutral': this.inverted,\n            'bg-neutral-base': !this.inverted,\n            'text-neutral-base-contrast': !this.inverted,\n          })} leading-sm w-max max-w-(--max-width) rounded px-2 py-1\"\n          role=\"tooltip\"\n          aria-live=${this.open ? 'polite' : 'off'}\n        >\n          <slot name=\"content\">${this.content}</slot>\n        </div>\n      </mid-popup>\n    `;\n  }\n}\n\nsetDefaultAnimation('tooltip.show', {\n  keyframes: [\n    { opacity: 0, scale: 0.8 },\n    { opacity: 1, scale: 1 },\n  ],\n  options: { duration: 150, easing: 'ease' },\n});\n\nsetDefaultAnimation('tooltip.hide', {\n  keyframes: [\n    { opacity: 1, scale: 1 },\n    { opacity: 0, scale: 0.8 },\n  ],\n  options: { duration: 150, easing: 'ease' },\n});\n"],"names":[],"mappings":"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"}