@aquera/nile-elements 0.1.32 → 0.1.33-beta-1.0

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "0.1.32",
+  "version": "0.1.33-beta-1.0",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

package/src/nile-input/nile-input.css.ts

@@ -15,6 +15,14 @@ export const styles = css`
     display: block;
   }
 
+  /* To Hide Safari's AutoFill icon */
+  input::-webkit-contacts-auto-fill-button {
+    visibility: hidden;
+    width: 0;
+    margin: 0;
+    padding: 0;
+  }
+
   .form-control .form-control__label {
     display: none;
   }

package/src/nile-menu/nile-menu.ts

@@ -67,21 +67,26 @@ export class NileMenu extends NileElement {
   }
 
   private handleKeyDown(event: KeyboardEvent) {
+    const target = event.target as HTMLElement;
+
+    // Only handle keyboard shortcuts if NOT inside input, textarea, or contenteditable
+    if (target.closest('nile-input') || target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable) {
+      return; // Ignore handling space, arrows, etc.
+    }
+
     // Make a selection when pressing enter
     if (event.key === 'Enter') {
       const item = this.getCurrentItem();
       event.preventDefault();
-
-      // Simulate a click to support @click handlers on menu items that also work with the keyboard
       item?.click();
     }
 
-    // Prevent scrolling when space is pressed
+    // Prevent scrolling when space is pressed (ONLY if not typing)
     if (event.key === ' ') {
       event.preventDefault();
     }
 
-    // Move the selection when pressing down or up
+    // Move selection
     if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {
       const items = this.getAllItems();
       const activeItem = this.getCurrentItem();
@@ -90,28 +95,20 @@ export class NileMenu extends NileElement {
       if (items.length > 0) {
         event.preventDefault();
 
-        if (event.key === 'ArrowDown') {
-          index++;
-        } else if (event.key === 'ArrowUp') {
-          index--;
-        } else if (event.key === 'Home') {
-          index = 0;
-        } else if (event.key === 'End') {
-          index = items.length - 1;
-        }
+        if (event.key === 'ArrowDown') index++;
+        else if (event.key === 'ArrowUp') index--;
+        else if (event.key === 'Home') index = 0;
+        else if (event.key === 'End') index = items.length - 1;
 
-        if (index < 0) {
-          index = items.length - 1;
-        }
-        if (index > items.length - 1) {
-          index = 0;
-        }
+        if (index < 0) index = items.length - 1;
+        if (index > items.length - 1) index = 0;
 
         this.setCurrentItem(items[index]);
         items[index].focus();
       }
     }
-  }
+}
+
 
   private handleMouseDown(event: MouseEvent) {
     const target = event.target as HTMLElement;

package/src/nile-table/nile-table.ts

@@ -74,7 +74,7 @@ export class NileTable extends NileElement {
 	handleBodyCssUpdate(){
     if (this.rows.length<2) return;
     const tableBodies = this.rows;
-		const firstEl=tableBodies[0].shadowRoot?.querySelector<HTMLDivElement>('div.base')
+		const firstEl=tableBodies[0].shadowRoot?.querySelector<HTMLDivElement>('div.base');
 		if(firstEl) {
 			firstEl.style.borderTopRightRadius="var(--nile-radius-radius-xl)";
 			firstEl.style.borderTopLeftRadius = 'var(--nile-radius-radius-xl)';
@@ -84,7 +84,7 @@ export class NileTable extends NileElement {
 		}
 		tableBodies.forEach((tb,i)=>{
 			if(i>0 && i<tableBodies.length-1){
-				const el=tb.shadowRoot?.querySelector<HTMLDivElement>('div.base')
+				const el=tb.shadowRoot?.querySelector<HTMLDivElement>('div.base');
 				if(el) {
 					el.style.borderTopRightRadius="0px";
 					el.style.borderTopLeftRadius = "0px";

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

@@ -0,0 +1,190 @@
+export function isInViewport(element: HTMLElement): boolean {
+  const rect = element.getBoundingClientRect();
+  return (
+    rect.top >= 0 &&
+    rect.left >= 0 &&
+    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+  );
+}
+
+
+export function getValidTooltipPosition(
+  triggerRect: DOMRect,
+  tooltipRect: DOMRect,
+  originalPlacement: string,
+  distance: number,
+  skidding: number,
+  caretSize: number,
+  viewportWidth: number,
+  viewportHeight: number
+): { top: number; left: number; placement: string } {
+  const triggerCenterX = triggerRect.left + triggerRect.width / 2;
+
+  const getCandidatePosition = (placement: string) => {
+    let top = 0;
+    let left = 0;
+
+    switch (placement) {
+      case 'top':
+        top = triggerRect.top - tooltipRect.height - distance;
+        left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2 + skidding;
+        break;
+      case 'top-start':
+        top = triggerRect.top - tooltipRect.height - distance;
+        left = triggerCenterX - caretSize + skidding;
+        break;
+      case 'top-end':
+        top = triggerRect.top - tooltipRect.height - distance;
+        left = triggerCenterX - tooltipRect.width + caretSize + 10 + skidding;
+        break;
+      case 'bottom':
+        top = triggerRect.bottom + distance;
+        left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2 + skidding;
+        break;
+      case 'bottom-start':
+        top = triggerRect.bottom + distance;
+        left = triggerCenterX - caretSize - 10 + skidding;
+        break;
+      case 'bottom-end':
+        top = triggerRect.bottom + distance;
+        left = triggerCenterX - (tooltipRect.width - caretSize) + 10 + skidding;
+        break;
+      case 'left':
+        top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2 + skidding;
+        left = triggerRect.left - tooltipRect.width - distance;
+        break;
+      case 'left-start':
+        top = triggerRect.top + skidding;
+        left = triggerRect.left - tooltipRect.width - distance;
+        break;
+      case 'left-end':
+        top = triggerRect.bottom - tooltipRect.height + skidding;
+        left = triggerRect.left - tooltipRect.width - distance;
+        break;
+      case 'right':
+        top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2 + skidding;
+        left = triggerRect.right + distance;
+        break;
+      case 'right-start':
+        top = triggerRect.top + skidding;
+        left = triggerRect.right + distance;
+        break;
+      case 'right-end':
+        top = triggerRect.bottom - tooltipRect.height + skidding;
+        left = triggerRect.right + distance;
+        break;
+      default:
+        top = triggerRect.top - tooltipRect.height - distance;
+        left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2 + skidding;
+    }
+
+    return { top, left };
+  };
+
+  const candidateFits = (top: number, left: number) =>
+    top >= 0 &&
+    left >= 0 &&
+    top + tooltipRect.height <= viewportHeight &&
+    left + tooltipRect.width <= viewportWidth;
+
+  let placement = originalPlacement;
+  let candidate = getCandidatePosition(placement);
+
+  if (!candidateFits(candidate.top, candidate.left)) {
+    if (!placement.startsWith('bottom')) {
+      placement = 'bottom';
+      candidate = getCandidatePosition(placement);
+    }
+  }
+
+  if (candidate.left < 0) {
+    candidate.left = 5;
+  } else if (candidate.left + tooltipRect.width > viewportWidth) {
+    candidate.left = viewportWidth - tooltipRect.width - 5;
+  }
+
+  if (candidate.top < 0) {
+    candidate.top = 5;
+  } else if (candidate.top + tooltipRect.height > viewportHeight) {
+    candidate.top = viewportHeight - tooltipRect.height - 5;
+  }
+
+  return { ...candidate, placement };
+}
+
+export interface CaretPositionInput {
+  placement: string;
+  tooltipRect: DOMRect;
+  triggerRect: DOMRect;
+  caretSize: number;
+  left: number;
+  top: number;
+}
+
+export function getCaretPosition({
+  placement,
+  tooltipRect,
+  triggerRect,
+  caretSize,
+  left,
+  top
+}: CaretPositionInput): { caretLeft: number; caretTop: number } {
+  const triggerCenterX = triggerRect.left + triggerRect.width / 2;
+  const triggerCenterY = triggerRect.top + triggerRect.height / 2;
+
+  const [primaryPlacement, secondaryPlacement] = placement.split('-');
+
+  let caretLeft = 0;
+  let caretTop = 0;
+
+  switch (primaryPlacement) {
+      case 'top':
+          caretTop = tooltipRect.height - caretSize;
+          caretLeft = triggerCenterX - left -  caretSize;
+          if (placement === 'top-end') {
+            caretLeft = triggerCenterX - left - caretSize;
+          } else if (secondaryPlacement === 'start') {
+            caretLeft = triggerCenterX - left -  caretSize;
+          } else if (secondaryPlacement === 'end') {
+            caretLeft = tooltipRect.width - 2 *  caretSize + 8;
+          }
+          caretLeft = Math.max(caretSize, Math.min(caretLeft, tooltipRect.width - 2 * caretSize));
+          break;
+
+    case 'bottom':
+      caretTop = -caretSize;
+      caretLeft = triggerCenterX - left - caretSize;
+      break;
+
+    case 'left':
+      caretLeft = tooltipRect.width - caretSize;
+      if (secondaryPlacement === 'start') {
+        caretTop = triggerRect.height / 2 - caretSize;
+      } else if (secondaryPlacement === 'end') {
+        caretTop = tooltipRect.height - triggerRect.height / 2 - caretSize;
+      } else {
+        caretTop = triggerCenterY - top - caretSize;
+      }
+      caretTop = Math.max(caretSize, Math.min(caretTop, tooltipRect.height - 2 * caretSize));
+      break;
+
+    case 'right':
+      caretLeft = -caretSize;
+      if (secondaryPlacement === 'start') {
+        caretTop = triggerRect.height / 2 - caretSize;
+      } else if (secondaryPlacement === 'end') {
+        caretTop = tooltipRect.height - triggerRect.height / 2 - caretSize;
+      } else {
+        caretTop = triggerCenterY - top - caretSize;
+      }
+      caretTop = Math.max(caretSize, Math.min(caretTop, tooltipRect.height - 2 * caretSize));
+      break;
+
+    default:
+      caretLeft = tooltipRect.width / 2 - caretSize;
+      caretTop = tooltipRect.height / 2 - caretSize;
+  }
+
+  return { caretLeft, caretTop };
+}

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

@@ -11,60 +11,63 @@ import { css } from 'lit';
  * Tooltip CSS
  */
 export const styles = css`
-  :host {
-    --max-width: 20rem;
-    --hide-delay: 0ms;
-    --show-delay: 150ms;
 
-    display: contents;
-  }
 
-  .tooltip {
-    --arrow-size: 6px;
-    --arrow-color: var(--nile-tooltip-color-background);
-  }
+:host {
+      position: relative;
+      display: inline-block;
+    }
+    .tooltip {
+      position: fixed;
+      z-index: 1000;
+      background-color: var(--nile-tooltip-color-background, #333);
+      color: var(--nile-colors-white-base, #fff);
+      padding: 6px 10px;
+      border-radius: 4px;
+      font-size: var(--nile-tooltip-font-size-sm, 14px);
+      line-height: var(--nile-tooltip-line-height-sm, 1.5);
+      opacity: 0;
+      transition: opacity 0.2s, transform 0.2s;
+      pointer-events: none;
+      white-space: normal;
+      visibility: hidden;
+      overflow: visible;
+ 
+    }
+    :host([open]) .tooltip {
+      opacity: 1;
+      visibility: visible;
+      pointer-events: auto;
+    }
+    .tooltip__body--large {
+      font-size: var(--nile-tooltip-font-size-lg, 16px);
+      line-height: var(--nile-tooltip-line-height-lg, 1.75);
+    }
+    .tooltip-content {
+      overflow: auto;
+      max-width: 252px;
+      max-height: 116px;
+    }
+    .tooltip-caret {
+      position: absolute;
+      width: calc(2 * var(--caret-size, 6px));
+      height: calc(2 * var(--caret-size, 6px));
+      background-color: inherit;
+      transform: rotate(45deg);
+      z-index: -1;
+    }
+    .trigger-container {
+      display: inline-block;
+    }
+ 
 
-  .tooltip::part(popup) {
-    pointer-events: none;
-    z-index: 1000;
-  }
 
-  .tooltip[placement^='top']::part(popup) {
-    transform-origin: bottom;
-  }
 
-  .tooltip[placement^='bottom']::part(popup) {
-    transform-origin: top;
-  }
 
-  .tooltip[placement^='left']::part(popup) {
-    transform-origin: right;
-  }
 
-  .tooltip[placement^='right']::part(popup) {
-    transform-origin: left;
-  }
 
-  .tooltip__body {
-    display: block;
-    width: max-content;
-    max-width: var(--max-width);
-    border-radius: 4px;
-    background-color: var(--nile-tooltip-color-background);
-    font-size: var(--nile-tooltip-font-size-sm);
-    font-weight: var(--nile-tooltip-font-weight-sm);
-    line-height: var(--nile-tooltip-line-height-sm);
-    padding: var(--nile-tooltip-padding-y) var(--nile-tooltip-padding-x);
-    color: var(--nile-colors-white-base);
-    pointer-events: none;
-    word-break: break-word;
-  }
 
-  .tooltip__body--large {
-    font-size: var(--nile-tooltip-font-size-lg);
-    line-height: var(--nile-tooltip-line-height-lg);
-    font-weight: var(--nile-tooltip-font-weight-lg);
-  }
+ 
 `;
 
-export default [styles];
+export default [styles];

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

@@ -0,0 +1,178 @@
+import { fixture, html, assert, oneEvent, waitUntil } from '@open-wc/testing';
+import './nile-tooltip';
+import { NileTooltip } from './nile-tooltip';
+
+describe('NileTooltip', () => {
+
+  it('renders with default properties', async () => {
+    const el = await fixture<NileTooltip>(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<NileTooltip>(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<NileTooltip>(html`
+      <nile-tooltip>
+        <div slot="content">Slot Content</div>
+        <button>Trigger</button>
+      </nile-tooltip>
+    `);
+
+    const slot = el.shadowRoot!.querySelector('slot[name="content"]') as HTMLSlotElement;
+    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<NileTooltip>(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<NileTooltip>(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<NileTooltip>(html`
+      <nile-tooltip content="Click me" trigger="click">
+        <button>Click</button>
+      </nile-tooltip>
+    `);
+    const trigger = el.shadowRoot!.querySelector('.trigger-container') as HTMLElement;
+    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<NileTooltip>(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<NileTooltip>(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<NileTooltip>(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<NileTooltip>(html`
+      <nile-tooltip content="Event test" trigger="click">
+        <button>Click</button>
+      </nile-tooltip>
+    `);
+    const trigger = el.shadowRoot!.querySelector('.trigger-container') as HTMLElement;
+    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<NileTooltip>(html`
+      <nile-tooltip content="Event test" trigger="click">
+        <button>Click</button>
+      </nile-tooltip>
+    `);
+    const trigger = el.shadowRoot!.querySelector('.trigger-container') as HTMLElement;
+    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<NileTooltip>(html`
+      <nile-tooltip content="Fallback" placement=${'invalid' as unknown as NileTooltip['placement']} >
+        <button>Trigger</button>
+      </nile-tooltip>
+    `);
+    await el.updateComplete;
+    assert.equal(el.placement, 'bottom');
+  });
+
+
+  it('updates hasTooltipSlot on slot change', async () => {
+    const el = await fixture<NileTooltip>(html`
+      <nile-tooltip>
+        <div slot="content">Initial slot</div>
+        <button>Trigger</button>
+      </nile-tooltip>
+    `);
+
+    const slot = el.shadowRoot!.querySelector('slot[name="content"]') as HTMLSlotElement;
+    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 as any).hasTooltipSlot);
+  });
+
+  it('respects hoist attribute', async () => {
+    const el = await fixture<NileTooltip>(html`
+      <nile-tooltip hoist content="Hoisted">
+        <button>Hoist</button>
+      </nile-tooltip>
+    `);
+    assert.isTrue(el.hoist);
+  });
+});