@aquera/nile-elements 0.1.32-beta-1.2 → 0.1.32-beta-1.4

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

@@ -1,33 +1,53 @@
+/**
+ * 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 { CSSResultArray } from 'lit';
 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';
+/**
+ * Nile icon component.
+ *
+ * @tag nile-tooltip
+ *
+ */
 export declare class NileTooltip extends NileElement {
     content: string;
     size: 'small' | 'large';
-    placement: TooltipPlacement;
+    placement: 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
     disabled: boolean;
     open: boolean;
+    /**
+     * 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.
+     */
     trigger: string;
     distance: number;
+    private readonly SHIFT_OFFSET;
+    /** The distance in pixels from which to offset the tooltip along its target. */
     skidding: number;
     hoist: boolean;
     tooltip: HTMLElement;
-    slotElement: HTMLSlotElement;
+    triggerContainer: HTMLElement;
+    caret: HTMLElement;
+    tooltipSlot: HTMLSlotElement;
+    private hasTooltipSlot;
     private hoverTimeout;
+    private caretSize;
+    private originalPlacement;
     static get styles(): CSSResultArray;
     connectedCallback(): void;
+    updated(changedProps: Map<string, unknown>): void;
     disconnectedCallback(): void;
-    private getBasePlacement;
-    private getAlignmentModifier;
+    private handleTooltipSlotChange;
     private updateTooltipPosition;
     private showTooltip;
-    private handleAfterShow;
     private hideTooltip;
-    private handleAfterHide;
     private handleMouseOver;
     private handleMouseOut;
     private handleClick;
-    updated(changedProperties: Map<string, any>): void;
     private handleFocus;
     private handleBlur;
     render(): import("lit-html").TemplateResult<1>;
@@ -37,4 +57,3 @@ declare global {
         'nile-tooltip': NileTooltip;
     }
 }
-export {};

package/dist/src/nile-tooltip/nile-tooltip.js

@@ -1,130 +1,92 @@
 import { __decorate } from "tslib";
+/**
+ * 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 { html } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { styles } from './nile-tooltip.css';
 import NileElement from '../internal/nile-element';
-// CSS Anchor positiong
+import { isInViewport, getValidTooltipPosition, getCaretPosition } from './nile-tooltip-utils';
+/**
+ * Nile icon component.
+ *
+ * @tag nile-tooltip
+ *
+ */
 let NileTooltip = class NileTooltip extends NileElement {
     constructor() {
         super(...arguments);
         this.content = '';
         this.size = 'small';
-        this.placement = 'top';
+        this.placement = 'bottom';
         this.disabled = false;
         this.open = false;
+        /**
+         * 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.
+         */
         this.trigger = 'hover focus';
         this.distance = 8;
+        this.SHIFT_OFFSET = 16;
+        /** The distance in pixels from which to offset the tooltip along its target. */
         this.skidding = 0;
         this.hoist = false;
+        this.hasTooltipSlot = false;
+        this.hoverTimeout = 0;
+        this.caretSize = 6;
+        this.originalPlacement = this.placement;
         this.updateTooltipPosition = () => {
-            if (!this.tooltip || !this.open)
+            if (!isInViewport(this.triggerContainer)) {
+                this.open = false;
                 return;
-            const triggerEl = this.slotElement.assignedElements()[0];
-            if (!triggerEl)
-                return;
-            const triggerRect = triggerEl.getBoundingClientRect();
+            }
+            const triggerRect = this.triggerContainer.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');
-            }
-            let finalAlignment = alignment;
-            if ((basePlacement === 'left' || basePlacement === 'right') &&
-                (finalBasePlacement === 'top' || finalBasePlacement === 'bottom')) {
-                if (alignment === 'start') {
-                    finalAlignment = 'start';
-                }
-                else if (alignment === 'end') {
-                    finalAlignment = 'end';
-                }
-            }
-            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;
-            }
-            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;
-                }
-            }
-            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;
-                }
-            }
-            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;
+            const { top, left, placement } = getValidTooltipPosition(triggerRect, tooltipRect, this.originalPlacement, this.distance, this.skidding, this.caretSize, viewportWidth, viewportHeight);
+            this.setAttribute('placement', placement);
             this.tooltip.style.top = `${top}px`;
             this.tooltip.style.left = `${left}px`;
-            this.tooltip.setAttribute('data-placement', finalPlacement);
+            const { caretLeft, caretTop } = getCaretPosition({
+                placement,
+                tooltipRect,
+                triggerRect,
+                caretSize: this.caretSize,
+                left,
+                top
+            });
+            this.caret.style.left = `${caretLeft}px`;
+            this.caret.style.top = `${caretTop}px`;
         };
         this.showTooltip = () => {
-            if (!this.disabled &&
-                this.content.trim() !== '') {
-                this.open = true;
+            const trimmedContent = this.content.trim();
+            if (!trimmedContent && !this.hasTooltipSlot) {
+                return;
+            }
+            if (!this.disabled && isInViewport(this.triggerContainer)) {
                 this.emit('nile-show');
+                this.open = true;
                 this.updateComplete.then(() => {
                     this.updateTooltipPosition();
-                    this.tooltip.addEventListener('transitionend', this.handleAfterShow, { once: true });
+                    this.emit('nile-after-show');
                 });
             }
-        };
-        this.handleAfterShow = () => {
-            this.emit('nile-after-show');
+            else {
+                this.open = false;
+            }
         };
         this.hideTooltip = () => {
-            if (!this.open)
-                return;
             this.emit('nile-hide');
             this.open = false;
-            this.tooltip.addEventListener('transitionend', this.handleAfterHide, { once: true });
-        };
-        this.handleAfterHide = () => {
-            this.emit('nile-after-hide');
+            setTimeout(() => {
+                this.emit('nile-after-hide');
+            }, 200);
         };
         this.handleMouseOver = () => {
             if (this.trigger.includes('hover')) {
@@ -140,9 +102,12 @@ let NileTooltip = class NileTooltip extends NileElement {
         };
         this.handleClick = () => {
             if (this.trigger.includes('click')) {
-                this.open = !this.open;
-                this.emit('nile-show');
-                this.updateComplete.then(() => this.updateTooltipPosition());
+                if (!this.open && isInViewport(this.triggerContainer)) {
+                    this.showTooltip();
+                }
+                else {
+                    this.hideTooltip();
+                }
             }
         };
         this.handleFocus = () => {
@@ -161,41 +126,64 @@ let NileTooltip = class NileTooltip extends NileElement {
     }
     connectedCallback() {
         super.connectedCallback();
+        this.originalPlacement = this.placement;
         window.addEventListener('resize', this.updateTooltipPosition);
         window.addEventListener('scroll', this.updateTooltipPosition, true);
     }
+    updated(changedProps) {
+        super.updated?.(changedProps);
+        const validPlacements = [
+            'top', 'top-start', 'top-end',
+            'right', 'right-start', 'right-end',
+            'bottom', 'bottom-start', 'bottom-end',
+            'left', 'left-start', 'left-end'
+        ];
+        if (!validPlacements.includes(this.placement)) {
+            console.warn(`[nile-tooltip] Invalid placement "${this.placement}", defaulting to "bottom".`);
+            this.placement = 'bottom';
+        }
+        if (!validPlacements.includes(this.originalPlacement)) {
+            this.originalPlacement = 'bottom';
+        }
+    }
     disconnectedCallback() {
         super.disconnectedCallback();
         window.removeEventListener('resize', this.updateTooltipPosition);
         window.removeEventListener('scroll', this.updateTooltipPosition, true);
     }
-    getBasePlacement(placement) {
-        return placement.split('-')[0];
-    }
-    getAlignmentModifier(placement) {
-        const parts = placement.split('-');
-        return parts.length > 1 ? parts[1] : null;
-    }
-    updated(changedProperties) {
-        super.updated(changedProperties);
-        if (changedProperties.has('open') || changedProperties.has('hoist')) {
-            if (this.open && this.hoist) {
-            }
-        }
+    handleTooltipSlotChange() {
+        const nodes = this.tooltipSlot.assignedNodes({ flatten: true });
+        this.hasTooltipSlot = nodes.length > 0;
+        this.requestUpdate();
     }
     render() {
         return html `
-      <div class=${classMap({ tooltip: true, 'tooltip__body--large': this.size === 'large' })}>
-        ${this.content}
+      <div
+        class=${classMap({
+            tooltip: true,
+            'tooltip__body--large': this.size === 'large',
+        })}
+        id="tooltip"
+      >
+        <div class="tooltip-content" part="content">
+          <slot name="content" @slotchange=${this.handleTooltipSlotChange}></slot>
+          ${!this.hasTooltipSlot ? html `${this.content}` : null}
+        </div>
+        <div class="tooltip-caret" style="--caret-size: ${this.caretSize}px;"></div>
       </div>
-      <slot
+
+      <div
+        class="trigger-container"
+        tabindex="0"
         @mouseover=${this.handleMouseOver}
         @mouseout=${this.handleMouseOut}
         @click=${this.handleClick}
-        @focus=${this.handleFocus}
-        @blur=${this.handleBlur}
+        @focusin=${this.handleFocus}
+        @focusout=${this.handleBlur}
         aria-describedby="tooltip"
-      ></slot>
+      >
+        <slot></slot>
+      </div>
     `;
     }
 };
@@ -224,14 +212,20 @@ __decorate([
     property({ type: Number })
 ], NileTooltip.prototype, "skidding", void 0);
 __decorate([
-    property({ type: Boolean })
+    property({ type: Boolean, reflect: true })
 ], NileTooltip.prototype, "hoist", void 0);
 __decorate([
     query('.tooltip')
 ], NileTooltip.prototype, "tooltip", void 0);
 __decorate([
-    query('slot')
-], NileTooltip.prototype, "slotElement", void 0);
+    query('.trigger-container')
+], NileTooltip.prototype, "triggerContainer", void 0);
+__decorate([
+    query('.tooltip-caret')
+], NileTooltip.prototype, "caret", void 0);
+__decorate([
+    query('slot[name="content"]')
+], NileTooltip.prototype, "tooltipSlot", void 0);
 NileTooltip = __decorate([
     customElement('nile-tooltip')
 ], NileTooltip);

package/dist/src/nile-tooltip/nile-tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-tooltip.js","sourceRoot":"","sources":["../../../src/nile-tooltip/nile-tooltip.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css,  CSSResultArray } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styles } from './nile-tooltip.css';\nimport NileElement from '../internal/nile-element';\n\ntype TooltipPlacement = \n  | 'top' | 'top-start' | 'top-end' \n  | 'right' | 'right-start' | 'right-end' \n  | 'bottom' | 'bottom-start' | 'bottom-end' \n  | 'left' | 'left-start' | 'left-end';\n\n// CSS Anchor positiong\n@customElement('nile-tooltip')\nexport class NileTooltip extends NileElement {\n  @property({ type: String }) content = '';\n  @property({ reflect: true }) size: 'small' | 'large' = 'small';\n  @property({ type: String }) placement: TooltipPlacement = 'top';\n  @property({ type: Boolean, reflect: true }) disabled = false;\n  @property({ type: Boolean, reflect: true }) open = false;\n  @property() trigger = 'hover focus';\n  @property({ type: Number }) distance = 8;\n  @property({ type: Number }) skidding = 0;\n  @property({ type: Boolean }) hoist = false;\n\n  @query('.tooltip') tooltip!: HTMLElement;\n  @query('slot') slotElement!: HTMLSlotElement;\n\n  private hoverTimeout: number;\n\n   public static get styles(): CSSResultArray {\n      return [styles];\n    }\n  \n\n \n \n  connectedCallback() {\n    super.connectedCallback();\n    window.addEventListener('resize', this.updateTooltipPosition);\n    window.addEventListener('scroll', this.updateTooltipPosition, true);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    window.removeEventListener('resize', this.updateTooltipPosition);\n    window.removeEventListener('scroll', this.updateTooltipPosition, true);\n  }\n\n  private getBasePlacement(placement: TooltipPlacement): 'top' | 'right' | 'bottom' | 'left' {\n    return placement.split('-')[0] as 'top' | 'right' | 'bottom' | 'left';\n  }\n\n  private getAlignmentModifier(placement: TooltipPlacement): 'start' | 'end' | null {\n    const parts = placement.split('-');\n    return parts.length > 1 ? parts[1] as 'start' | 'end' : null;\n  }\n\n  private updateTooltipPosition = () => {\n    if (!this.tooltip || !this.open) return;\n\n    const triggerEl = this.slotElement.assignedElements()[0] as HTMLElement;\n    if (!triggerEl) return;\n\n \n    \n    const triggerRect = triggerEl.getBoundingClientRect();\n    const tooltipRect = this.tooltip.getBoundingClientRect();\n    const viewportWidth = window.innerWidth;\n    const viewportHeight = window.innerHeight;\n    \n    let top = 0, left = 0;\n    let finalPlacement = this.placement;\n    const basePlacement = this.getBasePlacement(this.placement);\n    const alignment = this.getAlignmentModifier(this.placement);\n\n     \n    const fitsLeft = triggerRect.left - tooltipRect.width - this.distance > 0;\n    const fitsRight = triggerRect.right + tooltipRect.width + this.distance < viewportWidth;\n    const fitsBottom = triggerRect.bottom + tooltipRect.height + this.distance < viewportHeight;\n    const fitsTop = triggerRect.top - tooltipRect.height - this.distance > 0;\n\n   \n    let finalBasePlacement = basePlacement;\n    \n \n    if ((basePlacement === 'left' && !fitsLeft) || (basePlacement === 'right' && !fitsRight)) {\n      finalBasePlacement = fitsBottom ? 'bottom' : (fitsTop ? 'top' : 'bottom');\n    } \n \n    else if (basePlacement === 'top' && !fitsTop) {\n      finalBasePlacement = fitsBottom ? 'bottom' : (fitsLeft ? 'left' : 'right');\n    } else if (basePlacement === 'bottom' && !fitsBottom) {\n      finalBasePlacement = fitsTop ? 'top' : (fitsLeft ? 'left' : 'right');\n    }\n\n     \n    let finalAlignment = alignment;\n    \n \n    if ((basePlacement === 'left' || basePlacement === 'right') && \n        (finalBasePlacement === 'top' || finalBasePlacement === 'bottom')) {\n       \n      if (alignment === 'start') {\n        finalAlignment = 'start';\n      } else if (alignment === 'end') {\n        finalAlignment = 'end';\n      }\n    }\n\n   \n    switch (finalBasePlacement) {\n      case 'left':\n        top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2 + this.skidding;\n        left = triggerRect.left - tooltipRect.width - this.distance;\n        break;\n      case 'right':\n        top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2 + this.skidding;\n        left = triggerRect.right + this.distance;\n        break;\n      case 'top':\n        top = triggerRect.top - tooltipRect.height - this.distance;\n        left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2 + this.skidding;\n        break;\n      case 'bottom':\n        top = triggerRect.bottom + this.distance;\n        left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2 + this.skidding;\n        break;\n    }\n\n  \n    if ((finalBasePlacement === 'top' || finalBasePlacement === 'bottom') && finalAlignment) {\n      if (finalAlignment === 'start') {\n        left = triggerRect.left + this.skidding;\n      } else if (finalAlignment === 'end') {\n        left = triggerRect.right - tooltipRect.width + this.skidding;\n      }\n    }\n    \n   \n    if ((finalBasePlacement === 'left' || finalBasePlacement === 'right') && finalAlignment) {\n      if (finalAlignment === 'start') {\n        top = triggerRect.top + this.skidding;\n      } else if (finalAlignment === 'end') {\n        top = triggerRect.bottom - tooltipRect.height + this.skidding;\n      }\n    }\n\n  \n    finalPlacement = finalAlignment ? `${finalBasePlacement}-${finalAlignment}` : finalBasePlacement;\n\n \n    if (left < 0) left = 5;\n    if (left + tooltipRect.width > viewportWidth) left = viewportWidth - tooltipRect.width - 5;\n    if (top < 0) top = 5;\n    if (top + tooltipRect.height > viewportHeight) top = viewportHeight - tooltipRect.height - 5;\n\n    \n    this.tooltip.style.top = `${top}px`;\n    this.tooltip.style.left = `${left}px`;\n    this.tooltip.setAttribute('data-placement', finalPlacement as string);\n  };\n\n  private showTooltip = () => {\n    if (!this.disabled  && \n    this.content.trim() !== '') {\n      this.open = true;\n      this.emit('nile-show');\n      this.updateComplete.then(() => {\n        this.updateTooltipPosition();\n        \n \n        this.tooltip.addEventListener('transitionend', this.handleAfterShow, { once: true });\n      });\n    }\n  };\n  \n  private handleAfterShow = () => {\n    this.emit('nile-after-show');\n  };\n  \n\n  private hideTooltip = () => {\n    if (!this.open) return;\n    \n    this.emit('nile-hide');\n    this.open = false;\n    \n    this.tooltip.addEventListener('transitionend', this.handleAfterHide, { once: true });\n  };\n  \n  private handleAfterHide = () => {\n    this.emit('nile-after-hide');\n  };\n  \n  private handleMouseOver = () => {\n    if (this.trigger.includes('hover')) {\n      clearTimeout(this.hoverTimeout);\n      this.hoverTimeout = window.setTimeout(() => this.showTooltip(), 150);\n    }\n  };\n\n  private handleMouseOut = () => {\n    if (this.trigger.includes('hover')) {\n      clearTimeout(this.hoverTimeout);\n      this.hoverTimeout = window.setTimeout(() => this.hideTooltip(), 0);\n    }\n  };\n\n  private handleClick = () => {\n    if (this.trigger.includes('click')) {\n      this.open = !this.open;\n      this.emit('nile-show');\n      this.updateComplete.then(() => this.updateTooltipPosition());\n    }\n  };\n\n  updated(changedProperties: Map<string, any>) {\n    super.updated(changedProperties);\n    \n   \n    if (changedProperties.has('open') || changedProperties.has('hoist')) {\n      if (this.open && this.hoist) {\n      \n      }\n    }\n  }\n\n  private handleFocus = () => {\n    if (this.trigger.includes('focus')) {\n      this.showTooltip();\n    }\n  };\n\n  private handleBlur = () => {\n    if (this.trigger.includes('focus')) {\n      this.hideTooltip();\n    }\n  };\n\n  render() {\n    return html`\n      <div class=${classMap({ tooltip: true, 'tooltip__body--large': this.size === 'large' })}>\n        ${this.content}\n      </div>\n      <slot\n        @mouseover=${this.handleMouseOver}\n        @mouseout=${this.handleMouseOut}\n        @click=${this.handleClick}\n        @focus=${this.handleFocus}\n        @blur=${this.handleBlur}\n        aria-describedby=\"tooltip\"\n      ></slot>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-tooltip': NileTooltip;\n  }\n}"]}
+{"version":3,"file":"nile-tooltip.js","sourceRoot":"","sources":["../../../src/nile-tooltip/nile-tooltip.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { LitElement, html, css, CSSResultArray } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styles } from './nile-tooltip.css';\nimport NileElement from '../internal/nile-element';\nimport { isInViewport, getValidTooltipPosition, getCaretPosition } from './nile-tooltip-utils';\n/**\n * Nile icon component.\n *\n * @tag nile-tooltip\n *\n */\n\n@customElement('nile-tooltip')\nexport class NileTooltip extends NileElement {\n  @property({ type: String }) content = '';\n  @property({ reflect: true }) size: 'small' | 'large' = 'small';\n  @property({ type: String })\n  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' = 'bottom';\n  @property({ type: Boolean, reflect: true }) disabled = false;\n  @property({ type: Boolean, reflect: true }) open = false;\n  /**\n   * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple\n   * options can be passed by separating them with a space. When manual is used, the tooltip must be activated\n   * programmatically.\n   */\n  @property() trigger = 'hover focus';  \n  @property({ type: Number }) distance = 8;\n  private readonly SHIFT_OFFSET = 16;\n/** The distance in pixels from which to offset the tooltip along its target. */\n  @property({ type: Number }) skidding = 0;\n  @property({ type: Boolean, reflect: true }) hoist = false;\n\n  @query('.tooltip') tooltip!: HTMLElement;\n  @query('.trigger-container') triggerContainer!: HTMLElement;\n  @query('.tooltip-caret') caret!: HTMLElement;\n  @query('slot[name=\"content\"]') tooltipSlot!: HTMLSlotElement;\n\n  private hasTooltipSlot = false;\n  private hoverTimeout: number = 0;\n  private caretSize = 6;\n  private originalPlacement: string = this.placement;\n\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.originalPlacement = this.placement;\n    window.addEventListener('resize', this.updateTooltipPosition);\n    window.addEventListener('scroll', this.updateTooltipPosition, true);\n  }\n\n  updated(changedProps: Map<string, unknown>) {\n    super.updated?.(changedProps);\n\n    const validPlacements = [\n      'top', 'top-start', 'top-end',\n      'right', 'right-start', 'right-end',\n      'bottom', 'bottom-start', 'bottom-end',\n      'left', 'left-start', 'left-end'\n    ];\n\n    if (!validPlacements.includes(this.placement)) {\n      console.warn(`[nile-tooltip] Invalid placement \"${this.placement}\", defaulting to \"bottom\".`);\n      this.placement = 'bottom';\n    }\n\n    if (!validPlacements.includes(this.originalPlacement)) {\n      this.originalPlacement = 'bottom';\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    window.removeEventListener('resize', this.updateTooltipPosition);\n    window.removeEventListener('scroll', this.updateTooltipPosition, true);\n  }\n\n  private handleTooltipSlotChange() {\n    const nodes = this.tooltipSlot.assignedNodes({ flatten: true });\n    this.hasTooltipSlot = nodes.length > 0;\n    this.requestUpdate();\n  }\n\n  private updateTooltipPosition = () => {\n    if (!isInViewport(this.triggerContainer)) {\n      this.open = false;\n      return;\n    }\n\n    const triggerRect = this.triggerContainer.getBoundingClientRect();\n    const tooltipRect = this.tooltip.getBoundingClientRect();\n    const viewportWidth = window.innerWidth;\n    const viewportHeight = window.innerHeight;\n\n    const { top, left, placement } = getValidTooltipPosition(\n      triggerRect,\n      tooltipRect,\n      this.originalPlacement,\n      this.distance,\n      this.skidding,\n      this.caretSize,\n      viewportWidth,\n      viewportHeight\n    );\n\n    this.setAttribute('placement', placement);\n    this.tooltip.style.top = `${top}px`;\n    this.tooltip.style.left = `${left}px`;\n\n    const { caretLeft, caretTop } = getCaretPosition({\n      placement,\n      tooltipRect,\n      triggerRect,\n      caretSize: this.caretSize,\n      left,\n      top\n    });\n\n    this.caret.style.left = `${caretLeft}px`;\n    this.caret.style.top = `${caretTop}px`;\n  };\n\n  private showTooltip = () => {\n    const trimmedContent = this.content.trim();\n    if (!trimmedContent && !this.hasTooltipSlot) {\n      return;\n    }\n    if (!this.disabled && isInViewport(this.triggerContainer)) {\n      this.emit('nile-show');\n      this.open = true;\n      this.updateComplete.then(() => {\n        this.updateTooltipPosition();\n        this.emit('nile-after-show');\n      });\n    } else {\n      this.open = false;\n    }\n  };\n\n  private hideTooltip = () => {\n    this.emit('nile-hide');\n    this.open = false;\n    setTimeout(() => {\n      this.emit('nile-after-hide');\n    }, 200);\n  };\n\n  private handleMouseOver = () => {\n    if (this.trigger.includes('hover')) {\n      clearTimeout(this.hoverTimeout);\n      this.hoverTimeout = window.setTimeout(() => this.showTooltip(), 150);\n    }\n  };\n\n  private handleMouseOut = () => {\n    if (this.trigger.includes('hover')) {\n      clearTimeout(this.hoverTimeout);\n      this.hoverTimeout = window.setTimeout(() => this.hideTooltip(), 0);\n    }\n  };\n\n  private handleClick = () => {\n    if (this.trigger.includes('click')) {\n      if (!this.open && isInViewport(this.triggerContainer)) {\n        this.showTooltip();\n      } else {\n        this.hideTooltip();\n      }\n    }\n  };\n\n  private handleFocus = () => {\n    if (this.trigger.includes('focus')) {\n      this.showTooltip();\n    }\n  };\n\n  private handleBlur = () => {\n    if (this.trigger.includes('focus')) {\n      this.hideTooltip();\n    }\n  };\n\n  render() {\n    return html`\n      <div\n        class=${classMap({\n          tooltip: true,\n          'tooltip__body--large': this.size === 'large',\n        })}\n        id=\"tooltip\"\n      >\n        <div class=\"tooltip-content\" part=\"content\">\n          <slot name=\"content\" @slotchange=${this.handleTooltipSlotChange}></slot>\n          ${!this.hasTooltipSlot ? html`${this.content}` : null}\n        </div>\n        <div class=\"tooltip-caret\" style=\"--caret-size: ${this.caretSize}px;\"></div>\n      </div>\n\n      <div\n        class=\"trigger-container\"\n        tabindex=\"0\"\n        @mouseover=${this.handleMouseOver}\n        @mouseout=${this.handleMouseOut}\n        @click=${this.handleClick}\n        @focusin=${this.handleFocus}\n        @focusout=${this.handleBlur}\n        aria-describedby=\"tooltip\"\n      >\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-tooltip': NileTooltip;\n  }\n}\n\n"]}

package/dist/src/nile-tooltip/nile-tooltip.test.d.ts

@@ -0,0 +1 @@
+import './nile-tooltip';

package/dist/src/nile-tooltip/nile-tooltip.test.js

@@ -0,0 +1,158 @@
+import { fixture, html, assert, oneEvent, waitUntil } from '@open-wc/testing';
+import './nile-tooltip';
+describe('NileTooltip', () => {
+    it('renders with default properties', async () => {
+        const el = await fixture(html `<nile-tooltip content="Hello"><button>Hover me</button></nile-tooltip>`);
+        assert.equal(el.content, 'Hello');
+        assert.equal(el.placement, 'bottom');
+        assert.equal(el.size, 'small');
+        assert.equal(el.disabled, false);
+        assert.equal(el.open, false);
+    });
+    it('renders text content when no slot is used', async () => {
+        const el = await fixture(html `<nile-tooltip content="Fallback"><button>Trigger</button></nile-tooltip>`);
+        const content = el.shadowRoot.querySelector('.tooltip-content');
+        assert.include(content.textContent, 'Fallback');
+    });
+    it('uses slotted content when provided', async () => {
+        const el = await fixture(html `
+      <nile-tooltip>
+        <div slot="content">Slot Content</div>
+        <button>Trigger</button>
+      </nile-tooltip>
+    `);
+        const slot = el.shadowRoot.querySelector('slot[name="content"]');
+        const assigned = slot.assignedNodes({ flatten: true });
+        assert.isAbove(assigned.length, 0);
+        assert.include(assigned[0].textContent ?? '', 'Slot Content');
+    });
+    it('shows tooltip on hover when trigger includes "hover"', async () => {
+        const el = await fixture(html `
+      <nile-tooltip content="Tooltip" trigger="hover">
+        <button>Hover me</button>
+      </nile-tooltip>
+    `);
+        const trigger = el.shadowRoot.querySelector('.trigger-container');
+        trigger.dispatchEvent(new Event('mouseover', { bubbles: true }));
+        await waitUntil(() => el.open === true);
+        assert.isTrue(el.open);
+    });
+    it('hides tooltip on mouseout when trigger includes "hover"', async () => {
+        const el = await fixture(html `
+      <nile-tooltip content="Tooltip" trigger="hover">
+        <button>Hover me</button>
+      </nile-tooltip>
+    `);
+        const trigger = el.shadowRoot.querySelector('.trigger-container');
+        trigger.dispatchEvent(new Event('mouseover', { bubbles: true }));
+        await waitUntil(() => el.open === true);
+        trigger.dispatchEvent(new Event('mouseout', { bubbles: true }));
+        await waitUntil(() => el.open === false);
+    });
+    it('toggles tooltip on click when trigger includes "click"', async () => {
+        const el = await fixture(html `
+      <nile-tooltip content="Click me" trigger="click">
+        <button>Click</button>
+      </nile-tooltip>
+    `);
+        const trigger = el.shadowRoot.querySelector('.trigger-container');
+        trigger.click();
+        await waitUntil(() => el.open === true);
+        trigger.click();
+        await waitUntil(() => el.open === false);
+    });
+    it('shows and hides tooltip on focus/blur when trigger includes "focus"', async () => {
+        const el = await fixture(html `
+      <nile-tooltip content="Focus" trigger="focus">
+        <button>Focus</button>
+      </nile-tooltip>
+    `);
+        const trigger = el.shadowRoot.querySelector('.trigger-container');
+        trigger.dispatchEvent(new Event('focusin'));
+        await waitUntil(() => el.open === true);
+        trigger.dispatchEvent(new Event('focusout'));
+        await waitUntil(() => el.open === false);
+    });
+    it('does not show tooltip when disabled', async () => {
+        const el = await fixture(html `
+      <nile-tooltip content="Disabled" disabled trigger="hover">
+        <button>Hover me</button>
+      </nile-tooltip>
+    `);
+        const trigger = el.shadowRoot.querySelector('.trigger-container');
+        trigger.dispatchEvent(new Event('mouseover'));
+        await new Promise(resolve => setTimeout(resolve, 200));
+        assert.isFalse(el.open);
+    });
+    it('applies size class correctly', async () => {
+        const el = await fixture(html `
+      <nile-tooltip content="Tooltip" size="large">
+        <button>Trigger</button>
+      </nile-tooltip>
+    `);
+        const tooltip = el.shadowRoot.querySelector('.tooltip');
+        assert.isTrue(tooltip.classList.contains('tooltip__body--large'));
+    });
+    it('emits nile-show and nile-after-show events', async () => {
+        const el = await fixture(html `
+      <nile-tooltip content="Event test" trigger="click">
+        <button>Click</button>
+      </nile-tooltip>
+    `);
+        const trigger = el.shadowRoot.querySelector('.trigger-container');
+        setTimeout(() => trigger.click());
+        const showEvent = await oneEvent(el, 'nile-show');
+        assert.ok(showEvent);
+        const afterShow = await oneEvent(el, 'nile-after-show');
+        assert.ok(afterShow);
+    });
+    it('emits nile-hide and nile-after-hide events', async () => {
+        const el = await fixture(html `
+      <nile-tooltip content="Event test" trigger="click">
+        <button>Click</button>
+      </nile-tooltip>
+    `);
+        const trigger = el.shadowRoot.querySelector('.trigger-container');
+        trigger.click();
+        await waitUntil(() => el.open === true);
+        setTimeout(() => trigger.click());
+        const hideEvent = await oneEvent(el, 'nile-hide');
+        assert.ok(hideEvent);
+        const afterHide = await oneEvent(el, 'nile-after-hide');
+        assert.ok(afterHide);
+    });
+    it('defaults to "bottom" placement when given invalid value', async () => {
+        const el = await fixture(html `
+      <nile-tooltip content="Fallback" placement=${'invalid'} >
+        <button>Trigger</button>
+      </nile-tooltip>
+    `);
+        await el.updateComplete;
+        assert.equal(el.placement, 'bottom');
+    });
+    it('updates hasTooltipSlot on slot change', async () => {
+        const el = await fixture(html `
+      <nile-tooltip>
+        <div slot="content">Initial slot</div>
+        <button>Trigger</button>
+      </nile-tooltip>
+    `);
+        const slot = el.shadowRoot.querySelector('slot[name="content"]');
+        const newSlotNode = document.createElement('div');
+        newSlotNode.slot = 'content';
+        newSlotNode.textContent = 'Updated slot';
+        el.appendChild(newSlotNode);
+        slot.dispatchEvent(new Event('slotchange'));
+        await el.updateComplete;
+        assert.isTrue(el.hasTooltipSlot);
+    });
+    it('respects hoist attribute', async () => {
+        const el = await fixture(html `
+      <nile-tooltip hoist content="Hoisted">
+        <button>Hoist</button>
+      </nile-tooltip>
+    `);
+        assert.isTrue(el.hoist);
+    });
+});
+//# sourceMappingURL=nile-tooltip.test.js.map

package/dist/src/nile-tooltip/nile-tooltip.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-tooltip.test.js","sourceRoot":"","sources":["../../../src/nile-tooltip/nile-tooltip.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { fixture, html, assert, oneEvent, waitUntil } from '@open-wc/testing';\nimport './nile-tooltip';\nimport { NileTooltip } from './nile-tooltip';\n\ndescribe('NileTooltip', () => {\n\n  it('renders with default properties', async () => {\n    const el = await fixture<NileTooltip>(html`<nile-tooltip content=\"Hello\"><button>Hover me</button></nile-tooltip>`);\n    assert.equal(el.content, 'Hello');\n    assert.equal(el.placement, 'bottom');\n    assert.equal(el.size, 'small');\n    assert.equal(el.disabled, false);\n    assert.equal(el.open, false);\n  });\n\n  it('renders text content when no slot is used', async () => {\n    const el = await fixture<NileTooltip>(html`<nile-tooltip content=\"Fallback\"><button>Trigger</button></nile-tooltip>`);\n    const content = el.shadowRoot!.querySelector('.tooltip-content')!;\n    assert.include(content.textContent!, 'Fallback');\n  });\n\n  it('uses slotted content when provided', async () => {\n    const el = await fixture<NileTooltip>(html`\n      <nile-tooltip>\n        <div slot=\"content\">Slot Content</div>\n        <button>Trigger</button>\n      </nile-tooltip>\n    `);\n\n    const slot = el.shadowRoot!.querySelector('slot[name=\"content\"]') as HTMLSlotElement;\n    const assigned = slot.assignedNodes({ flatten: true });\n    assert.isAbove(assigned.length, 0);\n    assert.include(assigned[0].textContent ?? '', 'Slot Content');\n  });\n\n  it('shows tooltip on hover when trigger includes \"hover\"', async () => {\n    const el = await fixture<NileTooltip>(html`\n      <nile-tooltip content=\"Tooltip\" trigger=\"hover\">\n        <button>Hover me</button>\n      </nile-tooltip>\n    `);\n    const trigger = el.shadowRoot!.querySelector('.trigger-container')!;\n    trigger.dispatchEvent(new Event('mouseover', { bubbles: true }));\n    await waitUntil(() => el.open === true);\n    assert.isTrue(el.open);\n  });\n\n  it('hides tooltip on mouseout when trigger includes \"hover\"', async () => {\n    const el = await fixture<NileTooltip>(html`\n      <nile-tooltip content=\"Tooltip\" trigger=\"hover\">\n        <button>Hover me</button>\n      </nile-tooltip>\n    `);\n    const trigger = el.shadowRoot!.querySelector('.trigger-container')!;\n    trigger.dispatchEvent(new Event('mouseover', { bubbles: true }));\n    await waitUntil(() => el.open === true);\n    trigger.dispatchEvent(new Event('mouseout', { bubbles: true }));\n    await waitUntil(() => el.open === false);\n  });\n\n  it('toggles tooltip on click when trigger includes \"click\"', async () => {\n    const el = await fixture<NileTooltip>(html`\n      <nile-tooltip content=\"Click me\" trigger=\"click\">\n        <button>Click</button>\n      </nile-tooltip>\n    `);\n    const trigger = el.shadowRoot!.querySelector('.trigger-container') as HTMLElement;\n    trigger.click();\n    await waitUntil(() => el.open === true);\n    trigger.click();\n    await waitUntil(() => el.open === false);\n  });\n\n  it('shows and hides tooltip on focus/blur when trigger includes \"focus\"', async () => {\n    const el = await fixture<NileTooltip>(html`\n      <nile-tooltip content=\"Focus\" trigger=\"focus\">\n        <button>Focus</button>\n      </nile-tooltip>\n    `);\n    const trigger = el.shadowRoot!.querySelector('.trigger-container')!;\n    trigger.dispatchEvent(new Event('focusin'));\n    await waitUntil(() => el.open === true);\n    trigger.dispatchEvent(new Event('focusout'));\n    await waitUntil(() => el.open === false);\n  });\n\n  it('does not show tooltip when disabled', async () => {\n    const el = await fixture<NileTooltip>(html`\n      <nile-tooltip content=\"Disabled\" disabled trigger=\"hover\">\n        <button>Hover me</button>\n      </nile-tooltip>\n    `);\n    const trigger = el.shadowRoot!.querySelector('.trigger-container')!;\n    trigger.dispatchEvent(new Event('mouseover'));\n    await new Promise(resolve => setTimeout(resolve, 200));\n    assert.isFalse(el.open);\n  });\n\n  it('applies size class correctly', async () => {\n    const el = await fixture<NileTooltip>(html`\n      <nile-tooltip content=\"Tooltip\" size=\"large\">\n        <button>Trigger</button>\n      </nile-tooltip>\n    `);\n    const tooltip = el.shadowRoot!.querySelector('.tooltip')!;\n    assert.isTrue(tooltip.classList.contains('tooltip__body--large'));\n  });\n\n  it('emits nile-show and nile-after-show events', async () => {\n    const el = await fixture<NileTooltip>(html`\n      <nile-tooltip content=\"Event test\" trigger=\"click\">\n        <button>Click</button>\n      </nile-tooltip>\n    `);\n    const trigger = el.shadowRoot!.querySelector('.trigger-container') as HTMLElement;\n    setTimeout(() => trigger.click());\n    const showEvent = await oneEvent(el, 'nile-show');\n    assert.ok(showEvent);\n    const afterShow = await oneEvent(el, 'nile-after-show');\n    assert.ok(afterShow);\n  });\n\n  it('emits nile-hide and nile-after-hide events', async () => {\n    const el = await fixture<NileTooltip>(html`\n      <nile-tooltip content=\"Event test\" trigger=\"click\">\n        <button>Click</button>\n      </nile-tooltip>\n    `);\n    const trigger = el.shadowRoot!.querySelector('.trigger-container') as HTMLElement;\n    trigger.click();\n    await waitUntil(() => el.open === true);\n    setTimeout(() => trigger.click());\n    const hideEvent = await oneEvent(el, 'nile-hide');\n    assert.ok(hideEvent);\n    const afterHide = await oneEvent(el, 'nile-after-hide');\n    assert.ok(afterHide);\n  });\n\n  it('defaults to \"bottom\" placement when given invalid value', async () => {\n    const el = await fixture<NileTooltip>(html`\n      <nile-tooltip content=\"Fallback\" placement=${'invalid' as unknown as NileTooltip['placement']} >\n        <button>Trigger</button>\n      </nile-tooltip>\n    `);\n    await el.updateComplete;\n    assert.equal(el.placement, 'bottom');\n  });\n\n\n  it('updates hasTooltipSlot on slot change', async () => {\n    const el = await fixture<NileTooltip>(html`\n      <nile-tooltip>\n        <div slot=\"content\">Initial slot</div>\n        <button>Trigger</button>\n      </nile-tooltip>\n    `);\n\n    const slot = el.shadowRoot!.querySelector('slot[name=\"content\"]') as HTMLSlotElement;\n    const newSlotNode = document.createElement('div');\n    newSlotNode.slot = 'content';\n    newSlotNode.textContent = 'Updated slot';\n    el.appendChild(newSlotNode);\n\n    slot.dispatchEvent(new Event('slotchange'));\n    await el.updateComplete;\n\n    assert.isTrue((el as any).hasTooltipSlot);\n  });\n\n  it('respects hoist attribute', async () => {\n    const el = await fixture<NileTooltip>(html`\n      <nile-tooltip hoist content=\"Hoisted\">\n        <button>Hoist</button>\n      </nile-tooltip>\n    `);\n    assert.isTrue(el.hoist);\n  });\n});\n"]}