@aquera/nile-elements 0.1.32-beta-1.1 → 0.1.32-beta-1.3

package/src/nile-tooltip/nile-tooltip.ts

@@ -1,262 +1,324 @@
-import { LitElement, html, css,  CSSResultArray } from 'lit';
-import { customElement, property, query } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { LitElement, CSSResultArray, TemplateResult } from 'lit';
 import { styles } from './nile-tooltip.css';
+import '../nile-popup/nile-popup';
+import { animateTo, parseDuration, stopAnimations } from '../internal/animate';
+import { classMap } from 'lit/directives/class-map.js';
+import { customElement, property, query } from 'lit/decorators.js';
+import {
+  getAnimation,
+  setDefaultAnimation,
+} from '../utilities/animation-registry';
+import { html } from 'lit';
+// import { LocalizeController } from '../utilities/localize';
+import { waitForEvent } from '../internal/event';
+import { watch } from '../internal/watch';
 import NileElement from '../internal/nile-element';
-
-type TooltipPlacement = 
-  | 'top' | 'top-start' | 'top-end' 
-  | 'right' | 'right-start' | 'right-end' 
-  | 'bottom' | 'bottom-start' | 'bottom-end' 
-  | 'left' | 'left-start' | 'left-end';
-
-// CSS Anchor positiong
+import type { CSSResultGroup } from 'lit';
+import type NilePopup from '../nile-popup/nile-popup';
+/**
+ * Nile icon component.
+ *
+ * @tag nile-tooltip
+ *
+ */
 @customElement('nile-tooltip')
 export class NileTooltip extends NileElement {
-  @property({ type: String }) content = '';
+  /**
+   * The styles for Tooltip
+   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+   */
+  public static get styles(): CSSResultArray {
+    return [styles];
+  }
+
+  private hoverTimeout: number;
+  // private readonly localize = new LocalizeController(this);
+
+  @query('slot:not([name])') defaultSlot: HTMLSlotElement;
+  @query('.tooltip__body') body: HTMLElement;
+  @query('nile-popup') popup: NilePopup;
+
+  /** The tooltip's content. If you need to display HTML, use the `content` slot instead. */
+  @property({ type: String, reflect: true }) content = '';
+
+  /** Size Property to decide the tool tip size */
   @property({ reflect: true }) size: 'small' | 'large' = 'small';
-  @property({ type: String }) placement: TooltipPlacement = 'top';
+
+  /**
+   * The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip
+   * inside of the viewport.
+   */
+  @property() placement:
+    | 'top'
+    | 'top-start'
+    | 'top-end'
+    | 'right'
+    | 'right-start'
+    | 'right-end'
+    | 'bottom'
+    | 'bottom-start'
+    | 'bottom-end'
+    | 'left'
+    | 'left-start'
+    | 'left-end' = 'top';
+
+  /** Disables the tooltip so it won't show when triggered. */
   @property({ type: Boolean, reflect: true }) disabled = false;
-  @property({ type: Boolean, reflect: true }) open = false;
-  @property() trigger = 'hover focus';
+
+  /** The distance in pixels from which to offset the tooltip away from its target. */
   @property({ type: Number }) distance = 8;
-  @property({ type: Number }) skidding = 0;
-  @property({ type: Boolean }) hoist = false;
 
-  @query('.tooltip') tooltip!: HTMLElement;
-  @query('slot') slotElement!: HTMLSlotElement;
+  /** Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods. */
+  @property({ type: Boolean, reflect: true }) open = false;
 
-  private hoverTimeout: number;
+  /** The distance in pixels from which to offset the tooltip along its target. */
+  @property({ type: Number }) skidding = 0;
 
-   public static get styles(): CSSResultArray {
-      return [styles];
-    }
-  
+  /**
+   * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple
+   * options can be passed by separating them with a space. When manual is used, the tooltip must be activated
+   * programmatically.
+   */
+  @property() trigger = 'hover focus';
+
+  /**
+   * Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with
+   * `overflow: auto|hidden|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all,
+   * scenarios.
+   */
+  @property({ type: Boolean }) hoist = false;
 
- 
- 
   connectedCallback() {
     super.connectedCallback();
-    window.addEventListener('resize', this.updateTooltipPosition);
-    window.addEventListener('scroll', this.updateTooltipPosition, true);
+    this.handleBlur = this.handleBlur.bind(this);
+    this.handleClick = this.handleClick.bind(this);
+    this.handleFocus = this.handleFocus.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+    this.handleMouseOver = this.handleMouseOver.bind(this);
+    this.handleMouseOut = this.handleMouseOut.bind(this);
+
+    this.updateComplete.then(() => {
+      this.addEventListener('blur', this.handleBlur, true);
+      this.addEventListener('focus', this.handleFocus, true);
+      this.addEventListener('click', this.handleClick);
+      this.addEventListener('keydown', this.handleKeyDown);
+      this.addEventListener('mouseover', this.handleMouseOver);
+      this.addEventListener('mouseout', this.handleMouseOut);
+    });
+  }
+
+  firstUpdated() {
+    this.body.hidden = !this.open;
+
+    // If the tooltip is visible on init, update its position
+    if (this.open) {
+      this.popup.active = true;
+      this.popup.reposition();
+    }
   }
 
   disconnectedCallback() {
     super.disconnectedCallback();
-    window.removeEventListener('resize', this.updateTooltipPosition);
-    window.removeEventListener('scroll', this.updateTooltipPosition, true);
+    this.removeEventListener('blur', this.handleBlur, true);
+    this.removeEventListener('focus', this.handleFocus, true);
+    this.removeEventListener('click', this.handleClick);
+    this.removeEventListener('keydown', this.handleKeyDown);
+    this.removeEventListener('mouseover', this.handleMouseOver);
+    this.removeEventListener('mouseout', this.handleMouseOut);
   }
 
-  private getBasePlacement(placement: TooltipPlacement): 'top' | 'right' | 'bottom' | 'left' {
-    return placement.split('-')[0] as 'top' | 'right' | 'bottom' | 'left';
+  private handleBlur() {
+    if (this.hasTrigger('focus')) {
+      this.hide();
+    }
   }
 
-  private getAlignmentModifier(placement: TooltipPlacement): 'start' | 'end' | null {
-    const parts = placement.split('-');
-    return parts.length > 1 ? parts[1] as 'start' | 'end' : null;
+  private handleClick() {
+    if (this.hasTrigger('click')) {
+      if (this.open) {
+        this.hide();
+      } else {
+        this.show();
+      }
+    }
   }
 
-  private updateTooltipPosition = () => {
-    if (!this.tooltip || !this.open) return;
-
-    const triggerEl = this.slotElement.assignedElements()[0] as HTMLElement;
-    if (!triggerEl) return;
-
- 
-    
-    const triggerRect = triggerEl.getBoundingClientRect();
-    const tooltipRect = this.tooltip.getBoundingClientRect();
-    const viewportWidth = window.innerWidth;
-    const viewportHeight = window.innerHeight;
-    
-    let top = 0, left = 0;
-    let finalPlacement = this.placement;
-    const basePlacement = this.getBasePlacement(this.placement);
-    const alignment = this.getAlignmentModifier(this.placement);
-
-     
-    const fitsLeft = triggerRect.left - tooltipRect.width - this.distance > 0;
-    const fitsRight = triggerRect.right + tooltipRect.width + this.distance < viewportWidth;
-    const fitsBottom = triggerRect.bottom + tooltipRect.height + this.distance < viewportHeight;
-    const fitsTop = triggerRect.top - tooltipRect.height - this.distance > 0;
-
-   
-    let finalBasePlacement = basePlacement;
-    
- 
-    if ((basePlacement === 'left' && !fitsLeft) || (basePlacement === 'right' && !fitsRight)) {
-      finalBasePlacement = fitsBottom ? 'bottom' : (fitsTop ? 'top' : 'bottom');
-    } 
- 
-    else if (basePlacement === 'top' && !fitsTop) {
-      finalBasePlacement = fitsBottom ? 'bottom' : (fitsLeft ? 'left' : 'right');
-    } else if (basePlacement === 'bottom' && !fitsBottom) {
-      finalBasePlacement = fitsTop ? 'top' : (fitsLeft ? 'left' : 'right');
+  private handleFocus() {
+    if (this.hasTrigger('focus')) {
+      this.show();
     }
+  }
 
-     
-    let finalAlignment = alignment;
-    
- 
-    if ((basePlacement === 'left' || basePlacement === 'right') && 
-        (finalBasePlacement === 'top' || finalBasePlacement === 'bottom')) {
-       
-      if (alignment === 'start') {
-        finalAlignment = 'start';
-      } else if (alignment === 'end') {
-        finalAlignment = 'end';
-      }
+  private handleKeyDown(event: KeyboardEvent) {
+    // Pressing escape when the target element has focus should dismiss the tooltip
+    if (this.open && event.key === 'Escape') {
+      event.stopPropagation();
+      this.hide();
     }
+  }
 
-   
-    switch (finalBasePlacement) {
-      case 'left':
-        top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2 + this.skidding;
-        left = triggerRect.left - tooltipRect.width - this.distance;
-        break;
-      case 'right':
-        top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2 + this.skidding;
-        left = triggerRect.right + this.distance;
-        break;
-      case 'top':
-        top = triggerRect.top - tooltipRect.height - this.distance;
-        left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2 + this.skidding;
-        break;
-      case 'bottom':
-        top = triggerRect.bottom + this.distance;
-        left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2 + this.skidding;
-        break;
+  private handleMouseOver() {
+    if (this.hasTrigger('hover')) {
+      const delay = parseDuration(
+        getComputedStyle(this).getPropertyValue('--show-delay')
+      );
+      clearTimeout(this.hoverTimeout);
+      this.hoverTimeout = window.setTimeout(() => this.show(), delay);
     }
+  }
 
-  
-    if ((finalBasePlacement === 'top' || finalBasePlacement === 'bottom') && finalAlignment) {
-      if (finalAlignment === 'start') {
-        left = triggerRect.left + this.skidding;
-      } else if (finalAlignment === 'end') {
-        left = triggerRect.right - tooltipRect.width + this.skidding;
-      }
+  private handleMouseOut() {
+    if (this.hasTrigger('hover')) {
+      const delay = parseDuration(
+        getComputedStyle(this).getPropertyValue('--hide-delay')
+      );
+      clearTimeout(this.hoverTimeout);
+      this.hoverTimeout = window.setTimeout(() => this.hide(), delay);
     }
-    
-   
-    if ((finalBasePlacement === 'left' || finalBasePlacement === 'right') && finalAlignment) {
-      if (finalAlignment === 'start') {
-        top = triggerRect.top + this.skidding;
-      } else if (finalAlignment === 'end') {
-        top = triggerRect.bottom - tooltipRect.height + this.skidding;
+  }
+
+  private hasTrigger(triggerType: string) {
+    const triggers = this.trigger.split(' ');
+    return triggers.includes(triggerType);
+  }
+
+  @watch('open', { waitUntilFirstUpdate: true })
+  async handleOpenChange() {
+    if (this.open) {
+      if (this.disabled) {
+        return;
       }
-    }
 
-  
-    finalPlacement = finalAlignment ? `${finalBasePlacement}-${finalAlignment}` : finalBasePlacement;
-
- 
-    if (left < 0) left = 5;
-    if (left + tooltipRect.width > viewportWidth) left = viewportWidth - tooltipRect.width - 5;
-    if (top < 0) top = 5;
-    if (top + tooltipRect.height > viewportHeight) top = viewportHeight - tooltipRect.height - 5;
-
-    
-    this.tooltip.style.top = `${top}px`;
-    this.tooltip.style.left = `${left}px`;
-    this.tooltip.setAttribute('data-placement', finalPlacement as string);
-  };
-
-  private showTooltip = () => {
-    if (!this.disabled  && 
-    this.content.trim() !== '') {
-      this.open = true;
+      // Show
       this.emit('nile-show');
-      this.updateComplete.then(() => {
-        this.updateTooltipPosition();
-        
- 
-        this.tooltip.addEventListener('transitionend', this.handleAfterShow, { once: true });
+
+      await stopAnimations(this.body);
+      this.body.hidden = false;
+      this.popup.active = true;
+      const { keyframes, options } = getAnimation(this, 'tooltip.show', {
+        dir: '',
       });
-    }
-  };
-  
-  private handleAfterShow = () => {
-    this.emit('nile-after-show');
-  };
-  
-
-  private hideTooltip = () => {
-    if (!this.open) return;
-    
-    this.emit('nile-hide');
-    this.open = false;
-    
-    this.tooltip.addEventListener('transitionend', this.handleAfterHide, { once: true });
-  };
-  
-  private handleAfterHide = () => {
-    this.emit('nile-after-hide');
-  };
-  
-  private handleMouseOver = () => {
-    if (this.trigger.includes('hover')) {
-      clearTimeout(this.hoverTimeout);
-      this.hoverTimeout = window.setTimeout(() => this.showTooltip(), 150);
-    }
-  };
+      await animateTo(this.popup.popup, keyframes, options);
 
-  private handleMouseOut = () => {
-    if (this.trigger.includes('hover')) {
-      clearTimeout(this.hoverTimeout);
-      this.hoverTimeout = window.setTimeout(() => this.hideTooltip(), 0);
+      this.emit('nile-after-show');
+    } else {
+      // Hide
+      this.emit('nile-hide');
+
+      await stopAnimations(this.body);
+      const { keyframes, options } = getAnimation(this, 'tooltip.hide', {
+        dir: '',
+      });
+      await animateTo(this.popup.popup, keyframes, options);
+      this.popup.active = false;
+      this.body.hidden = true;
+
+      this.emit('nile-after-hide');
     }
-  };
+  }
 
-  private handleClick = () => {
-    if (this.trigger.includes('click')) {
-      this.open = !this.open;
-      this.emit('nile-show');
-      this.updateComplete.then(() => this.updateTooltipPosition());
+  @watch(['content', 'distance', 'hoist', 'placement', 'skidding'])
+  async handleOptionsChange() {
+    if (this.hasUpdated) {
+      await this.updateComplete;
+      this.popup.reposition();
     }
-  };
-
-  updated(changedProperties: Map<string, any>) {
-    super.updated(changedProperties);
-    
-   
-    if (changedProperties.has('open') || changedProperties.has('hoist')) {
-      if (this.open && this.hoist) {
-      
-      }
+  }
+
+  @watch('disabled')
+  handleDisabledChange() {
+    if (this.disabled && this.open) {
+      this.hide();
     }
   }
 
-  private handleFocus = () => {
-    if (this.trigger.includes('focus')) {
-      this.showTooltip();
+  /** Shows the tooltip. */
+  async show() {
+    if (this.open || !this.content?.trim().length) {
+      return undefined;
     }
-  };
 
-  private handleBlur = () => {
-    if (this.trigger.includes('focus')) {
-      this.hideTooltip();
+    this.open = true;
+    return waitForEvent(this, 'nile-after-show');
+  }
+
+  /** Hides the tooltip */
+  async hide() {
+    if (!this.open) {
+      return undefined;
     }
-  };
+
+    this.open = false;
+    return waitForEvent(this, 'nile-after-hide');
+  }
 
   render() {
     return html`
-      <div class=${classMap({ tooltip: true, 'tooltip__body--large': this.size === 'large' })}>
-        ${this.content}
-      </div>
-      <slot
-        @mouseover=${this.handleMouseOver}
-        @mouseout=${this.handleMouseOut}
-        @click=${this.handleClick}
-        @focus=${this.handleFocus}
-        @blur=${this.handleBlur}
-        aria-describedby="tooltip"
-      ></slot>
+      <nile-popup
+        part="base"
+        exportparts="
+          popup:base__popup,
+          arrow:base__arrow
+        "
+        class=${classMap({
+          tooltip: true,
+          'tooltip--open': this.open,
+        })}
+        placement=${this.placement}
+        distance=${this.distance}
+        skidding=${this.skidding}
+        strategy=${this.hoist ? 'fixed' : 'absolute'}
+        flip
+        shift
+        arrow
+      >
+        <slot slot="anchor" aria-describedby="tooltip"></slot>
+
+        <slot
+          name="content"
+          part="body"
+          id="tooltip"
+          class=${classMap({
+            tooltip__body: true,
+            'tooltip__body--large': this.size === 'large',
+          })}
+          role="tooltip"
+          aria-live=${this.open ? 'polite' : 'off'}
+        >
+          ${this.content}
+        </slot>
+      </nile-popup>
     `;
   }
 }
 
+setDefaultAnimation('tooltip.show', {
+  keyframes: [
+    { opacity: 0, scale: 0.8 },
+    { opacity: 1, scale: 1 },
+  ],
+  options: { duration: 150, easing: 'ease' },
+});
+
+setDefaultAnimation('tooltip.hide', {
+  keyframes: [
+    { opacity: 1, scale: 1 },
+    { opacity: 0, scale: 0.8 },
+  ],
+  options: { duration: 150, easing: 'ease' },
+});
+
+export default NileTooltip;
+
 declare global {
   interface HTMLElementTagNameMap {
     'nile-tooltip': NileTooltip;
   }
-}
+}