@aquera/nile-elements 0.1.39-beta-1.0 → 0.1.39-beta-1.2

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

@@ -1,271 +0,0 @@
-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;
-        const centeredLeft = triggerRect.left + (triggerRect.width / 2) - (tooltipRect.width / 2) + skidding;
-        left = Math.max(triggerRect.left + skidding, centeredLeft);
-        break;
-      }
-      case 'top-end': {
-        top = triggerRect.top - tooltipRect.height - distance;
-        const centeredLeft = triggerRect.left + (triggerRect.width / 2) - (tooltipRect.width / 2) + skidding;
-        const maxLeft = triggerRect.right - tooltipRect.width + skidding;
-        left = Math.min(centeredLeft, maxLeft);
-        break;
-      }
-
-      case 'bottom':
-        top = triggerRect.bottom + distance;
-        left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2 + skidding;
-        break;
-      case 'bottom-start': {
-        top = triggerRect.bottom + distance;
-        const centeredLeft = triggerRect.left + (triggerRect.width / 2) - (tooltipRect.width / 2) + skidding;
-        left = Math.max(triggerRect.left + skidding, centeredLeft);
-
-        break;
-      }
-
-      case 'bottom-end': {
-        top = triggerRect.bottom + distance;
-        const centeredLeft = triggerRect.left + (triggerRect.width / 2) - (tooltipRect.width / 2) + skidding;
-        const maxLeft = triggerRect.right - tooltipRect.width + skidding;
-        left = Math.min(centeredLeft, maxLeft);
-        break;
-      }
-
-      case 'left':
-        top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2 + skidding;
-        left = triggerRect.left - tooltipRect.width - distance;
-        break;
-      case 'left-start': {
-        const triggerCenterY = triggerRect.top + triggerRect.height / 2;
-        top = triggerCenterY - tooltipRect.height / 2;
-        left = triggerRect.left - tooltipRect.width - distance;
-        if (top < triggerRect.top) {
-          top = triggerRect.top;
-        }
-        break;
-      }
-
-      case 'left-end': {
-        const triggerCenterY = triggerRect.top + triggerRect.height / 2;
-        top = triggerCenterY - tooltipRect.height / 2;
-        left = triggerRect.left - tooltipRect.width - distance;
-        if (top + tooltipRect.height > triggerRect.bottom) {
-          top = triggerRect.bottom - tooltipRect.height;
-        }
-
-        break;
-      }
-
-      case 'right':
-        top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2 + skidding;
-        left = triggerRect.right + distance;
-        break;
-      case 'right-start': {
-        const triggerCenterY = triggerRect.top + triggerRect.height / 2;
-        top = triggerCenterY - tooltipRect.height / 2;
-        left = triggerRect.right + distance;
-        if (top < triggerRect.top) {
-          top = triggerRect.top;
-        }
-
-        break;
-      }
-
-      case 'right-end': {
-        const triggerCenterY = triggerRect.top + triggerRect.height / 2;
-        top = triggerCenterY - tooltipRect.height / 2;
-        left = triggerRect.right + distance;
-        if (top + tooltipRect.height > triggerRect.bottom) {
-          top = triggerRect.bottom - tooltipRect.height;
-        }
-
-        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 (['top', 'top-start', 'top-end'].includes(originalPlacement)) {
-      placement = 'bottom';
-    } else if (['bottom', 'bottom-start', 'bottom-end'].includes(originalPlacement)) {
-      placement = 'top';
-    } else if (['right', 'right-start', 'right-end'].includes(originalPlacement)) {
-      placement = 'left';
-    } else if (['left', 'left-start', 'left-end'].includes(originalPlacement)) {
-      placement = 'right';
-    }
-    candidate = getCandidatePosition(placement);
-    const leftCandidate = getCandidatePosition('left');
-    const bottomCandidate = getCandidatePosition('bottom');
-    const topCandidate = getCandidatePosition('top');
-    if (
-      !candidateFits(leftCandidate.top, leftCandidate.left) &&
-      !candidateFits(bottomCandidate.top, bottomCandidate.left) &&
-      !candidateFits(topCandidate.top, topCandidate.left)
-    ) {
-      placement = 'right';
-      candidate = getCandidatePosition(placement);
-    }
-    else {
-      const rightCandidate = getCandidatePosition('right');
-      if (
-        !candidateFits(rightCandidate.top, rightCandidate.left) &&
-        !candidateFits(bottomCandidate.top, bottomCandidate.left) &&
-        !candidateFits(topCandidate.top, topCandidate.left)
-      ) {
-        placement = 'left';
-        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') {
-        const computedCaretTop = triggerCenterY - top - caretSize;
-        const minCaretTop = triggerRect.top - top;
-        caretTop = Math.max(computedCaretTop, minCaretTop);
-      } else if (secondaryPlacement === 'end') {
-        const computedCaretTop = triggerCenterY - top - caretSize;
-        const maxCaretTop = triggerRect.bottom - top - 2 * caretSize;
-        caretTop = Math.min(computedCaretTop, maxCaretTop);
-      } else {
-        caretTop = triggerCenterY - top - caretSize;
-      }
-      caretTop = Math.max(caretSize, Math.min(caretTop, tooltipRect.height - 2 * caretSize));
-      break;
-
-
-    case 'right':
-      caretLeft = -caretSize;
-      if (secondaryPlacement === 'start') {
-        const computedCaretTop = triggerCenterY - top - caretSize;
-        const minCaretTop = triggerRect.top - top;
-        caretTop = Math.max(computedCaretTop, minCaretTop);
-      } else if (secondaryPlacement === 'end') {
-        const computedCaretTop = triggerCenterY - top - caretSize;
-        const maxCaretTop = triggerRect.bottom - top - 2 * caretSize;
-        caretTop = Math.min(computedCaretTop, maxCaretTop);
-      } 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.test.ts

@@ -1,168 +0,0 @@
-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, 'top');
-    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('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, 'top');
-  });
-
-
-  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);
-  });
-});