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

package/plop-templates/lit/lit.template.ts.hbs

@@ -1,3 +0,0 @@
-/**
- * Template File for nile-{{name}} component
- */

package/plop-templates/lit/lit.test.ts.hbs

@@ -1,38 +0,0 @@
-/**
- * Copyright Aquera Inc 2025
- *
- * 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 { fixture, assert, expect, html } from '@open-wc/testing';
-import './nile-{{name}}'; // Just import to register the element
-
-describe('<nile-{{name}}>', () => {
-  let element: HTMLElement;
-
-  beforeEach(async () => {
-    element = await fixture(html`<nile-{{name}}></nile-{{name}}>`);
-  });
-
-  it('passes accessibility test', async () => {
-    await expect(element).to.be.accessible();
-  });
-
-  it('renders with the correct tag name', () => {
-    expect(element.tagName.toLowerCase()).to.equal('nile-{{name}}');
-  });
-
-  it('renders with slot content when provided', async () => {
-    const testContent = 'Test Content';
-    element = await fixture(html`<nile-{{name}}>${testContent}</nile-{{name}}>`);
-    
-    const slot = (element.shadowRoot!.querySelector('slot') as HTMLSlotElement);
-    assert.exists(slot, 'Slot should exist');
-
-    const assignedNodes = slot.assignedNodes({ flatten: true });
-    expect(assignedNodes.length).to.be.greaterThan(0);
-    expect(assignedNodes[0].textContent?.trim()).to.equal(testContent);
-  });
-});

package/plop-templates/lit/sub-components/index.ts.hbs

@@ -1,4 +0,0 @@
-/**
- * Sub component  for nile-{{name}} component. 
- * Follows the same parent folder structure.
- */

package/plop-templates/lit/types/type.ts.hbs

@@ -1,3 +0,0 @@
-/**
- * Types for nile-{{name}} component
- */

package/plop-templates/lit/utils/lit.utils.ts.hbs

@@ -1,4 +0,0 @@
-/**
- * Utility functions for nile-{{name}} component
- *  
- */

package/src/nile-filter-chip/index.ts

@@ -1 +0,0 @@
-export { NileFilterChip } from './nile-filter-chip';

package/src/nile-filter-chip/nile-filter-chip.css.ts

@@ -1,138 +0,0 @@
-/**
-* 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 {css} from 'lit';
-
-/**
- * FilterChip CSS
- */
-
-export const styles = css`
-
-
-  .filter-chips {
-    display: flex;
-    align-items: center;
-  }
-
-
-  .chip {
-    display: inline-flex;
-    align-items: center;
-    height: 30px;
-    padding: 8px;
-    border: 1px solid var(--nile-filter-chip-chip-border-color-stroke);
-    border-radius: 4px;
-    font-size: 14px;
-    background-color: var(--nile-filter-chip-background-default);
-    color: var(--nile-filter-chip-text-default);
-    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
-    cursor: pointer;
-    box-sizing: border-box;
-  }
-
-  .chip:hover {
-    background-color: var(--nile-filter-chip-hover-background);
-  }
- .chip:active {
-  background-color: var(--nile-filter-chip-active-background);
-  border-color: var(--nile-filter-chip-active-border-color-stroke);
-}
-:host([active]) .chip {
-  background-color: var(--nile-filter-chip-active-background);
-  border-color: var(--nile-filter-chip-active-border-color-stroke);
-}
-
-
-  .icon {
-    color: var(--nile-filter-chip-icon-color-default);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    vertical-align: middle;
-    position: relative;
-    top: 12px;
-  }
-
-  .label {
-    font-weight: 500;
-    color: var(--nile-filter-chip-label-color-default);
-  }
-
-  nile-badge::part(base) {
-    width: auto;
-    height: 14px;
-    border-radius: 100px;
-    padding: 6px;
-    gap: 10px;
-    font-size: 8px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    line-height: 1;
-  }
-
-  .chip-container {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    width: 100%;
-  }
-
-  .clear-all-container {
-    margin-left: 18px;
-    white-space: nowrap;
-    cursor: pointer;
-  }
-
-
- .value {
-  color: var(--nile-filter-chip-values-color-default);
-  display: inline-block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  max-width: 140px;
-  vertical-align: bottom;
-}
-
-
-  .close-icon {
-    color: var(--nile-filter-chip-close-icon-color-default);
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    border-radius: 50%;
-    transition: background-color 0.2s;
-  }
-
-  .close-icon:hover {
-    background-color: var(--nile-filter-chip-close-icon-hover-background);
-    color: var(--nile-filter-chip-close-icon-hover-color);
-  }
-
-.label-wrapper {
-  margin-right: 4px;
-}
-
-::slotted([slot="icon"]) {
-  margin-right: 6px;
-}
-
-.value-wrapper {
-  margin-right: 4px; 
-}
-
-.badge-wrapper {
-  margin-right: 12px;  
-}
-
-`;
-
-export default [styles];
-
- 

package/src/nile-filter-chip/nile-filter-chip.test.ts

@@ -1,92 +0,0 @@
-import { fixture, expect, html, oneEvent } from '@open-wc/testing';
-import './nile-filter-chip';
-import { NileFilterChip } from './nile-filter-chip';
-
-describe('<nile-filter-chip>', () => {
-  afterEach(() => {
-    (NileFilterChip as any).activeChips = [];
-  });
-
-  it('registers and unregisters itself in activeChips', async () => {
-    const el = await fixture<NileFilterChip>(html`
-      <nile-filter-chip label="L" text="T"></nile-filter-chip>
-    `);
-    expect((NileFilterChip as any).activeChips).to.include(el);
-    el.remove();
-    await el.updateComplete;
-    expect((NileFilterChip as any).activeChips).to.not.include(el);
-  });
-
-  it('renders fallback label and text', async () => {
-    const el = await fixture<NileFilterChip>(html`
-      <nile-filter-chip label="MyLabel" text="MyText"></nile-filter-chip>
-    `);
-    const label = el.shadowRoot!.querySelector('.label')! as HTMLElement;
-    const value = el.shadowRoot!.querySelector('.value')! as HTMLElement;
-    expect(label.textContent).to.equal('MyLabel:');
-    expect(value.textContent!.trim()).to.equal('MyText');
-  });
-
-  it('renders slotted label and value over fallback', async () => {
-    const el = await fixture<NileFilterChip>(html`
-      <nile-filter-chip>
-        <span slot="label">SLOT-LBL</span>
-        <span slot="value">SLOT-VAL</span>
-      </nile-filter-chip>
-    `);
-    const slottedLabel = el.querySelector('[slot="label"]')! as HTMLElement;
-    const slottedValue = el.querySelector('[slot="value"]')! as HTMLElement;
-    expect(slottedLabel.textContent).to.equal('SLOT-LBL');
-    expect(slottedValue.textContent).to.equal('SLOT-VAL');
-  });
-
-  it('renders an icon when the `icon` property is set', async () => {
-    const el = await fixture<NileFilterChip>(html`
-      <nile-filter-chip icon="★" label="L" text="T"></nile-filter-chip>
-    `);
-    const iconSpan = el.shadowRoot!.querySelector('.icon')! as HTMLElement;
-    expect(iconSpan).to.exist;
-    expect(iconSpan.textContent).to.equal('★');
-  });
-
-  it('does not render a badge when viewMoreCount is zero', async () => {
-    const el = await fixture<NileFilterChip>(html`
-      <nile-filter-chip viewMoreCount="0" label="L" text="T"></nile-filter-chip>
-    `);
-    expect(el.shadowRoot!.querySelector('nile-badge')).to.be.null;
-  });
-
-  it('renders a +badge when viewMoreCount > 0', async () => {
-    const el = await fixture<NileFilterChip>(html`
-      <nile-filter-chip viewMoreCount="5" label="L" text="T"></nile-filter-chip>
-    `);
-    const badge = el.shadowRoot!.querySelector('nile-badge')! as HTMLElement;
-    expect(badge).to.exist;
-    expect(badge.textContent).to.contain('+5');
-  });
-
-
-
-  it('dispatches `nile-click` on chip click', async () => {
-    const el = await fixture<NileFilterChip>(html`
-      <nile-filter-chip label="L" text="T"></nile-filter-chip>
-    `);
-    const chip = el.shadowRoot!.querySelector('.chip')! as HTMLElement;
-    setTimeout(() => chip.click());
-    const ev = await oneEvent(el, 'nile-click');
-    expect(ev.detail).to.deep.equal({ text: 'T', viewMoreCount: 0 });
-  });
-
-  it('dispatches `nile-close` on close icon click and removes itself', async () => {
-    const el = await fixture<NileFilterChip>(html`
-      <nile-filter-chip closable viewMoreCount="2" text="TT"></nile-filter-chip>
-    `);
-    const closeIcon = el.shadowRoot!.querySelector('.close-icon')! as HTMLElement;
-    setTimeout(() => closeIcon.click());
-    const ev = await oneEvent(el, 'nile-close');
-    expect(ev.detail).to.deep.equal({ text: 'TT', viewMoreCount: 2 });
-    expect(document.body.contains(el)).to.be.false;
-  });
-
- 
-});

package/src/nile-filter-chip/nile-filter-chip.ts

@@ -1,136 +0,0 @@
-import { LitElement, html, css, CSSResultArray, TemplateResult } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import NileElement from '../internal/nile-element';
-import { styles } from './nile-filter-chip.css';
-
-/**
- * Nile filter-chip component.
- *
- * @tag nile-filter-chip
- */
-@customElement('nile-filter-chip')
-export class NileFilterChip extends NileElement {
-  @property({ type: String }) label = '';
-  @property({ type: String }) text = '';
-  @property({ type: Number }) viewMoreCount: number = 0;
-  @property({ type: Boolean }) editable = false;
-  @property({ type: Boolean }) closable = false;
-  @property({ type: String }) icon = '';
-  @property({ type: String }) removeIcon = '';
-  @property({ type: Boolean, reflect: true }) active = false;
-
-
-  private static activeChips: NileFilterChip[] = [];
-
-  public static get styles(): CSSResultArray {
-    return [styles];
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-    this.registerChip();
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.unregisterChip();
-  }
-
-  private registerChip() {
-    NileFilterChip.activeChips.push(this);
-  }
-
-  private unregisterChip() {
-    NileFilterChip.activeChips = NileFilterChip.activeChips.filter(
-      (chip) => chip !== this
-    );
-  }
-
-  private handleClose(event: Event) {
-    event.stopPropagation();
-    this.dispatchEvent(
-      new CustomEvent('nile-close', { detail: { text: this.text, viewMoreCount: this.viewMoreCount } })
-    );
-    this.remove();
-  }
-
-  private handleClick() {
-    this.dispatchEvent(
-      new CustomEvent('nile-click', { detail: { text: this.text, viewMoreCount: this.viewMoreCount } })
-    );
-  }
-
-  private getLabelSlot(): TemplateResult {
-    return html`
-    <span class="label-wrapper">
-      <slot name="label">
-        <span class="label" part="label">${this.label}:</span>
-      </slot>
-    </span>
-
-    `;
-  }
-
-  private getValueSlot(): TemplateResult {
-    return html`
-    <span class="value-wrapper">
-      <slot name="value">
-        <span class="value" part="value">${this.text}</span>
-      </slot>
-    </span>
-
-    `;
-  }
-
-  private getviewMoreCountSlot(): TemplateResult {
-    return html`
-      <slot name="suffix">
-        ${this.viewMoreCount
-          ? html`
-          <span class="badge-wrapper">
-              <nile-badge variant="primary" pilltype="pill-color">
-                +${this.viewMoreCount}
-              </nile-badge>
-          </span>
-
-            `
-          : html``}
-      </slot>
-    `;
-  }
-
-  private getCloseIconSlot(): TemplateResult {
-    return html`
-      ${this.closable
-        ? html`
-            <span class="close-icon" @click="${this.handleClose}">
-              <nile-icon name="${this.removeIcon || 'close'}" size="12"></nile-icon>
-            </span>
-          `
-        : html``}
-    `;
-  }
-
-  public render(): TemplateResult {
-    return html`
-      <div class="chip" @click="${this.handleClick}">
-        <slot name="icon">
-          ${this.icon ? html`<span class="icon">${this.icon}</span>` : html``}
-        </slot>
-        ${this.getLabelSlot()}
-        <slot name="content"></slot>
-        ${this.getValueSlot()}
-        ${this.getviewMoreCountSlot()}
-        ${this.getCloseIconSlot()}
-      </div>
-    `;
-  }
-}
-
-export default NileFilterChip;
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'nile-filter-chip': NileFilterChip;
-  }
-}

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 };
-}