@aquera/nile-elements 1.3.3-beta-1.4 → 1.3.3-beta-1.6

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

@@ -1,130 +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 {css} from 'lit';
-
-/**
- * LightTooltip CSS
- */
-export const styles = css`
-  :host { }
-
-  .tippy-box[data-animation=fade][data-state=hidden] { opacity: 0; }
-  [data-tippy-root] { max-width: calc(100vw - 10px); }
-
-  .tippy-box {
-    position: relative;
-    background-color: var(--nile-colors-dark-900, var(--ng-colors-bg-primary-solid));
-    color: var(--nile-colors-dark-200, var(--ng-colors-text-white));
-    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-semibold));
-    border-radius: var(--nile-radius-sm, var(--ng-radius-md));
-    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-xs));
-    line-height: 1.4;
-    white-space: normal;
-    outline: 0;
-    transition-property: transform, visibility, opacity;
-    padding: var(--nile-spacing-xs, var(--ng-spacing-md)) var(--nile-spacing-sm, var(--ng-spacing-lg));
-    box-shadow: 0px 12px 16px -4px #0A0D1214, 0px 4px 6px -2px #0A0D1208, 0px 2px 2px -1px #0A0D120A;
-   }
-
- 
-  .tippy-box[data-placement^=top] > .tippy-arrow { bottom: 0; }
-  .tippy-box[data-placement^=top] > .tippy-arrow:before {
-    bottom: -7px;
-    border-width: 8px 8px 0;
-    border-top-color: initial;
-  }
-
-  .tippy-box[data-placement^=bottom] > .tippy-arrow { top: 0; }
-  .tippy-box[data-placement^=bottom] > .tippy-arrow:before {
-    top: -7px;
-    border-width: 0 8px 8px;
-    border-bottom-color: initial;
-  }
-
-  .tippy-box[data-placement^=left] > .tippy-arrow { right: 0; }
-  .tippy-box[data-placement^=left] > .tippy-arrow:before {
-    right: -7px;
-    border-width: 8px 0 8px 8px;
-    border-left-color: initial;
-  }
-
-  .tippy-box[data-placement^=right] > .tippy-arrow { left: 0; }
-  .tippy-box[data-placement^=right] > .tippy-arrow:before {
-    left: -7px;
-    border-width: 8px 8px 8px 0;
-    border-right-color: initial;
-  }
-
-  .tippy-box[data-inertia][data-state=visible] {
-    transition-timing-function: cubic-bezier(.54, 1.5, .38, 1.11);
-  }
-
-  .tippy-box.large { font-size: 16px; padding: 8px 12px; }
-  .tippy-arrow { width: 16px; height: 16px; color: #333; }
-  .tippy-arrow:before {
-    content: "";
-    position: absolute;
-    border-color: transparent;
-    border-style: solid;
-  }
-
-  .tippy-content {
-    position: relative;
-    z-index: 1;
-  }
-
-  .tippy-box[data-placement^=top] > .tippy-svg-arrow { bottom: 0; }
-  .tippy-box[data-placement^=top] > .tippy-svg-arrow:after,
-  .tippy-box[data-placement^=top] > .tippy-svg-arrow > svg {
-    top: 16px;
-    transform: rotate(180deg);
-  }
-  .tippy-box[data-placement^=bottom] > .tippy-svg-arrow { top: 0; }
-  .tippy-box[data-placement^=bottom] > .tippy-svg-arrow > svg { bottom: 16px; }
-  .tippy-box[data-placement^=left] > .tippy-svg-arrow { right: 0; }
-  .tippy-box[data-placement^=left] > .tippy-svg-arrow:after,
-  .tippy-box[data-placement^=left] > .tippy-svg-arrow > svg {
-    transform: rotate(90deg);
-    top: calc(50% - 3px);
-    left: 11px;
-  }
-  .tippy-box[data-placement^=right] > .tippy-svg-arrow { left: 0; }
-  .tippy-box[data-placement^=right] > .tippy-svg-arrow:after,
-  .tippy-box[data-placement^=right] > .tippy-svg-arrow > svg {
-    transform: rotate(-90deg);
-    top: calc(50% - 3px);
-    right: 11px;
-  }
-
-  .tippy-svg-arrow {
-    width: 16px;
-    height: 16px;
-    fill: var(--nile-colors-dark-900, var(--ng-colors-bg-primary-solid));
-    text-align: initial;
-    position: absolute;
-  }
-
-  .tippy-svg-arrow > svg {
-    position: absolute;
-  }
-`;
-
-
-export function injectGlobalTippyStyles(): void {
-  const STYLE_ID = 'nile-lite-tooltip-styles';
-  if (document.getElementById(STYLE_ID)) return;
-
-  const style = document.createElement('style');
-  style.id = STYLE_ID;
-  style.textContent = styles.cssText;
-  document.head.appendChild(style);
-}
- 
-injectGlobalTippyStyles();
-
-export default [styles];

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

@@ -1,427 +0,0 @@
-import { customElement, property } from 'lit/decorators.js';
-import { CSSResultArray, PropertyValues } from 'lit';
-import { styles } from './nile-lite-tooltip.css';
-import NileElement from '../internal/nile-element';
-import tippy, {
-  Instance,
-  Props,
-  followCursor,
-  roundArrow,
-  createSingleton,
-} from 'tippy.js';
-import { parseFollowCursor, parseDuration,  } from './utils';
-import { VisibilityManager } from '../utilities/visibility-manager.js';
-
-/**
- * Nile lite-tooltip component.
- *
- * Supports wrapper, sibling (for), and singleton modes.
- * Aligns with Tippy.js props and Nile design system.
- *
- * @tag nile-lite-tooltip
- */
-@customElement('nile-lite-tooltip')
-export class NileliteTooltip extends NileElement {
-  public static get styles(): CSSResultArray {
-    return [styles];
-  }
-
-  protected createRenderRoot() {
-    return this; // lite DOM
-  }
-
-  // ───────────── Props ─────────────
-  /** ID of the target element (for sibling mode) */
-  @property({ type: String, attribute: 'for' }) for: string | null = null;
-
-  /** Tooltip content text or HTML */
-  @property({ type: String, reflect: true }) content = '';
-
-  /** Tooltip size (applies CSS class) */
-  @property({ type: String, reflect: true }) size: 'small' | 'large' = 'small';
-
-  /** Animation duration for show/hide (ms). Can be a single value or [show, hide]. */
-  @property({ type: String, reflect: true }) duration:
-    | string
-    | number
-    | [number, number] = 200;
-
-  /** Interactive mode */
-  @property({ type: Boolean, reflect: true }) interactive = false;
-
-  /** Placement of the tooltip */
-  @property({ type: String })
-  placement:
-    | 'top'
-    | 'top-start'
-    | 'top-end'
-    | 'right'
-    | 'right-start'
-    | 'right-end'
-    | 'bottom'
-    | 'bottom-start'
-    | 'bottom-end'
-    | 'left'
-    | 'left-start'
-    | 'left-end'
-    | 'auto'
-    | 'auto-start'
-    | 'auto-end' = 'top';
-
-  @property({ type: Boolean }) disabled = false;
-
-  @property({ type: Number }) distance = 8;
-
-  @property({ type: Number }) skidding = 0;
-
-  @property({ type: Boolean, reflect: true }) open = false;
-
-  @property({ type: String }) trigger: Props['trigger'] = 'mouseenter focus';
-
-  @property({ type: Boolean, reflect: true }) allowHTML = false;
-
-  @property({ type: String, reflect: true, attribute: true })
-  followCursor:
-    | boolean
-    | 'initial'
-    | 'horizontal'
-    | 'vertical'
-    | 'true'
-    | 'false' = false;
-
-  @property({ type: String, reflect: true, attribute: true })
-  arrow: 'default' | 'round' | 'large' | 'small' | 'wide' | 'narrow' | 'none' =
-    'default';
-
-  @property({ type: Boolean, reflect: true }) singleton = false;
-
-  @property({ type: Boolean, reflect: true }) enableRecursiveMode = false;
-
-
-  /** Not added in Doc */
-
-  @property({ type: String, reflect: true }) delay:
-    | number
-    | [number, number] = 0;
-
-  @property({ type: String, reflect: true }) maxWidth: string | number = 'auto';
-
-  @property({ type: Number }) zIndex = 9999;
-
-  @property({ type: [Boolean, String], reflect: true }) hideOnClick:
-    | boolean
-    | 'toggle' = true;
-
-  @property({ type: Boolean, reflect: true }) inertia = false;
-
-  @property({ type: Number }) interactiveBorder = 2;
-
-  private visibilityManager?: VisibilityManager;
-
-  @property({ type: Boolean, reflect: true }) enableVisibilityEffect = false;
-  
-  @property({ type: Boolean, reflect: true }) enableTabClose = false;
-
-  private tooltipInstances?: Instance[];
-  private singleInstance?: Instance;
-  private singletonInstance?: Instance;
-  private targetEl?: HTMLElement | null;
-  private generatedId?: string;
-  private prevDescribedby?: string | null;
-
-  constructor() {
-    super();
-  }
-
-  protected firstUpdated(): void {
-    this.attachTooltip();
-    const targetEl =
-      (this.for && document.getElementById(this.for)) ||
-      (this.firstElementChild as HTMLElement | null);
-  
-    this.visibilityManager = new VisibilityManager({
-      host: this,
-      target: targetEl,
-      enableVisibilityEffect: this.enableVisibilityEffect,
-      enableTabClose: this.enableTabClose,
-      isOpen: () => this.open,
-      onAnchorOutOfView: () => {
-        this.open = false;
-        this.hideAllTooltips();
-        this.emit('nile-visibility-change', {
-          visible: false,
-          reason: 'anchor-out-of-view',
-        });
-      },
-      onDocumentHidden: () => {
-        this.open = false;
-        this.hideAllTooltips();
-        this.emit('nile-visibility-change', {
-          visible: false,
-          reason: 'document-hidden',
-        });
-      },
-      emit: (event, detail) => this.emit(`nile-${event}`, detail),
-    });
-  }
-  
-
-  public refresh() {
-    this.attachTooltip();
-  }
-  
-
-  private attachTooltip(): void {
-    this.destroyTooltips();
-    if (this.disabled) return;
-
-    const options: Partial<Props> = {
-      content:
-        this.content || this.getAttribute('data-tippy-content') || undefined,
-      placement: this.placement,
-      trigger: this.trigger,
-      offset: [this.skidding, this.distance],
-      theme: 'lite',
-      animation: 'fade',
-      interactive: this.interactive,
-      arrow: roundArrow,
-      duration: parseDuration(this.duration),
-      allowHTML: this.allowHTML,
-      delay: this.delay,
-      maxWidth: this.maxWidth,
-      zIndex: this.zIndex,
-      hideOnClick: false,
-      inertia: this.inertia,
-      interactiveBorder: this.interactiveBorder,
-      appendTo: document.body,
-      followCursor: parseFollowCursor(this.followCursor),
-      plugins: parseFollowCursor(this.followCursor) ? [followCursor] : [],
-      onShow: instance => {
-        this.open = true;
-        this.dispatchEvent(
-          new CustomEvent('nile-show', {
-            detail: { instance, target: instance.reference },
-          })
-        );
-        this.dispatchEvent(
-          new CustomEvent('nile-toggle', {
-            detail: { open: true, instance, target: instance.reference },
-          })
-        );
-        return undefined;
-      },
-      onHide: instance => {
-        this.open = false;
-        this.dispatchEvent(
-          new CustomEvent('nile-hide', {
-            detail: { instance, target: instance.reference },
-          })
-        );
-        this.dispatchEvent(
-          new CustomEvent('nile-toggle', {
-            detail: { open: false, instance, target: instance.reference },
-          })
-        );
-        return undefined;
-      },
-    };
-    if (this.for) {
-      if (this.singleton && !this.for.startsWith('#') && !document.getElementById(this.for)) {
-        const targetEls = Array.from(document.querySelectorAll(`.${this.for}`));
-        if (targetEls.length > 0) {
-          this.tooltipInstances = targetEls.map(el => {
-            const instance = tippy(el as HTMLElement, {
-              ...options,
-              content: el.getAttribute('content') || this.content,
-            });
-            instance.popper.querySelector('.tippy-box')?.classList.add(this.size);
-            return instance;
-          });
-    
-          this.singletonInstance = createSingleton(this.tooltipInstances, {
-            delay: [75, 0],
-            arrow: roundArrow,
-            moveTransition: 'transform 0.15s ease-out',
-          });
-    
-          if (this.open) queueMicrotask(() => this.singletonInstance?.show());
-          return;
-        }
-      }
-    
-      const containerEl = document.getElementById(this.for);
-      if (this.singleton && containerEl) {
-        const childEls = Array.from(containerEl.querySelectorAll('[content]'));
-        if (childEls.length > 0) {
-          this.tooltipInstances = childEls.map(el => {
-            const instance = tippy(el as HTMLElement, {
-              ...options,
-              content: el.getAttribute('content') || this.content,
-            });
-            instance.popper.querySelector('.tippy-box')?.classList.add(this.size);
-            return instance;
-          });
-    
-          this.singletonInstance = createSingleton(this.tooltipInstances, {
-            delay: [75, 0],
-            arrow: roundArrow,
-            moveTransition: 'transform 0.15s ease-out',
-          });
-    
-          if (this.open) queueMicrotask(() => this.singletonInstance?.show());
-          return;
-        }
-      }
-    
-      this.targetEl = document.getElementById(this.for);
-      if (!this.targetEl) return;
-
-      if (!this.id) {
-        this.generatedId = `nile-tooltip-${Math.random()
-          .toString(36)
-          .slice(2, 9)}`;
-        this.id = this.generatedId;
-      }
-
-      this.prevDescribedby = this.targetEl.getAttribute('aria-describedby');
-      const describedby = this.prevDescribedby
-        ? `${this.prevDescribedby} ${this.id}`
-        : this.id;
-      this.targetEl.setAttribute('aria-describedby', describedby);
-
-      this.singleInstance = tippy(this.targetEl, options);
-      if (this.size)
-        this.singleInstance.popper
-          .querySelector('.tippy-box')
-          ?.classList.add(this.size);
-      if (this.open) {
-        queueMicrotask(() => this.singleInstance?.show());
-      }
-      return;
-    }
-  
-
-if (this.enableRecursiveMode) {
-  const children = Array.from(this.querySelectorAll('*'));
-  if (children.length > 0) {
-    this.tooltipInstances = children.map(child => {
-      const el = child as HTMLElement;
-      const localContent = el.getAttribute('content') || this.content;
-      const instance = tippy(el, { ...options, content: localContent });
-      instance.popper.querySelector('.tippy-box')?.classList.add(this.size);
-      return instance;
-    });
-
-    if (this.singleton && this.tooltipInstances.length > 1) {
-      this.singletonInstance = createSingleton(this.tooltipInstances, {
-        delay: [75, 0],
-        arrow: roundArrow,
-        moveTransition: 'transform 0.15s ease-out',
-      });
-    }
-
-    if (this.open) {
-      if (this.singletonInstance) this.singletonInstance.show();
-      else this.tooltipInstances.forEach(t => t.show());
-    }
-  }
-
-} else {
-  const firstChild = this.firstElementChild as HTMLElement | null;
-
-  if (firstChild) {
-    const localContent = firstChild.getAttribute('content') || this.content;
-    const instance = tippy(firstChild, { ...options, content: localContent });
-    instance.popper.querySelector('.tippy-box')?.classList.add(this.size);
-
-    this.tooltipInstances = [instance];
-
-    if (this.open) {
-      instance.show();
-    }
-  }
-}  
-  }
-  
-
-  private destroyTooltips(): void {
-    this.tooltipInstances?.forEach(t => t.destroy());
-    this.singleInstance?.destroy();
-    this.singletonInstance?.destroy();
-
-    this.tooltipInstances = undefined;
-    this.singleInstance = undefined;
-    this.singletonInstance = undefined;
-
-    if (this.targetEl && this.id) {
-      const current = this.targetEl
-        .getAttribute('aria-describedby')
-        ?.split(' ')
-        .filter(id => id !== this.id)
-        .join(' ')
-        .trim();
-      if (current) {
-        this.targetEl.setAttribute('aria-describedby', current);
-      } else {
-        this.targetEl.removeAttribute('aria-describedby');
-      }
-    }
-  }
-
-  private hideAllTooltips(): void {
-    this.singleInstance?.hide();
-    this.singletonInstance?.hide();
-    this.tooltipInstances?.forEach(t => t.hide());
-  }
-
-  
-  disconnectedCallback(): void {
-    super.disconnectedCallback();
-    this.visibilityManager?.cleanup();
-    this.destroyTooltips();
-  }
-
-  updated(changed: PropertyValues): void {
-    super.updated(changed);
-
-    if (
-      [
-        'for',
-        'content',
-        'placement',
-        'distance',
-        'skidding',
-        'trigger',
-        'disabled',
-        'hoist',
-        'size',
-        'arrow',
-        'singleton',
-      ].some(p => changed.has(p))
-    ) {
-      this.attachTooltip();
-    }
-
-    if (changed.has('open')) {
-      if (this.open) {
-        this.visibilityManager?.setup();
-        this.singleInstance?.show();
-        this.singletonInstance?.show();
-        this.tooltipInstances?.forEach(t => t.show());
-      } else {
-        this.visibilityManager?.cleanup();
-        this.singleInstance?.hide();
-        this.singletonInstance?.hide();
-        this.tooltipInstances?.forEach(t => t.hide());
-      }
-    }
-  }
-}
-
-export default NileliteTooltip;
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'nile-lite-tooltip': NileliteTooltip;
-  }
-}

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

@@ -1,31 +0,0 @@
- 
-export function parseFollowCursor(
-  value: boolean | 'initial' | 'horizontal' | 'vertical' | 'true' | 'false'
-): boolean | 'initial' | 'horizontal' | 'vertical' {
-  if (value === true || value === 'true') return true;
-  if (value === false || value === 'false') return false;
-  if (['initial', 'horizontal', 'vertical'].includes(String(value))) {
-    return value as 'initial' | 'horizontal' | 'vertical';
-  }
-  return false;
-}
-
-export function parseDuration(
-    value: string | number | [number, number] | undefined
-  ): number | [number, number] {
-    if (Array.isArray(value)) return value;
-    if (typeof value === 'number') return value;
-  
-    if (typeof value === 'string') {
-      if (value.includes(',')) {
-        const parts = value.split(',').map(v => parseInt(v.trim(), 10));
-        return parts as [number, number];
-      }
-  
-      
-      const num = parseInt(value, 10);
-      if (!isNaN(num)) return num;
-    }
-  
-    return 200; 
-  }

package/src/nile-loader/index.ts

@@ -1 +0,0 @@
-export { NileLoader }  from './nile-loader';

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

@@ -1,81 +0,0 @@
-import { css } from 'lit';
-
-export default css`
-  :host {
-    --loader-spacing: var(--nile-spacing-lg, var(--ng-spacing-xl));
-    --loader-label-font-size: var(--nile-type-scale-3,var(--ng-font-size-text-sm));
-    --loader-label-line-height: var(--nile-line-height-small,var(--ng-line-height-text-sm));
-    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
-    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
-    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
-  }
-
-  .loader__container {
-    display: inline-flex;
-    flex-direction: column;
-    align-items: center;
-    gap: var(--loader-spacing);
-  }
-
-  .loader__container--sm {}
-
-  .loader__container--md {}
-
-  .loader__container--lg {
-    --loader-label-font-size: var(--nile-type-scale-5,var(--ng-font-size-text-lg));
-    --loader-label-line-height: var(--nile-line-height-large,var(--ng-line-height-text-lg));
-  }
-  
-  .loader__container--xl {
-    --loader-spacing: var(--nile-spacing-xl,var(--ng-spacing-xl));
-    --loader-label-font-size: var(--nile-type-scale-5,var(--ng-font-size-text-lg));
-    --loader-label-line-height: var(--nile-line-height-large,var(--ng-line-height-text-lg));
-  }
-
-  .svg__container {
-    display: flex;
-    position: relative;
-    transform: translate(50%, 50%);
-  }
-
-  .loader__label {
-    font-size: var(--loader-label-font-size);
-    line-height: var(--loader-label-line-height); 
-    font-family:var(--nile-font-family-sans-serif,--ng-font-family-body);
-    font-style: normal;
-    font-weight: var(--nile-font-weight-medium,var(--ng-font-weight-medium));
-  }
-
-  .nile-loader__v1 {
-    border-radius: 50%;
-    display: inline-block;
-    border-top: 1px solid currentColor;
-    border-right: 1px solid currentColor;
-    box-shadow: 0 1px 1px -1px currentColor;
-    box-sizing: border-box;
-    animation: rotation 0.5s linear infinite;
-  }
-
-  @keyframes rotation {
-    0% {
-      transform: rotate(0deg);
-    }
-    100% {
-      transform: rotate(360deg);
-    }
-  }
-
-  .nile-loader__v2,
-  .nile-loader__v3 {
-    animation: spin 1.5s linear infinite;
-  }
-
-  @keyframes spin {
-    0% {
-      transform: translate(-50%, -50%) rotate(0deg);
-    }
-    100% {
-      transform: translate(-50%, -50%) rotate(360deg);
-    }
-  }
-`;