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

package/src/nile-rich-text-editor/utils/inline-utils.ts

@@ -1,249 +0,0 @@
-export function toggleInlineTag(
-  root: HTMLElement,
-  tag: 'strong' | 'em' | 'u' | 'span',
-  attrs?: Record<string, string>
-) {
-  const sel = window.getSelection();
-  if (!sel || sel.rangeCount === 0) return;
-  const range = sel.getRangeAt(0);
-  const aliases: Record<string, string[]> = {
-    strong: ['strong', 'b'],
-    em: ['em', 'i'],
-    u: ['u'],
-    span: ['span'],
-  };
-  const candidates = aliases[tag] ?? [tag];
-  const isMatch = (el: HTMLElement) =>
-    candidates.includes(el.tagName.toLowerCase());
-
-  function unwrap(el: HTMLElement) {
-    const p = el.parentNode;
-    if (!p) return;
-    while (el.firstChild) p.insertBefore(el.firstChild, el);
-    p.removeChild(el);
-  }
-
-  function removeEmptyAndNested(root: HTMLElement) {
-    root.querySelectorAll(candidates.join(',')).forEach(el => {
-      if (!el.textContent?.trim()) {
-        el.remove();
-        return;
-      }
-      const nested = Array.from(el.querySelectorAll(candidates.join(',')));
-      nested.forEach(n => {
-        if (n === el) return;
-        while (n.firstChild) el.insertBefore(n.firstChild, n);
-        n.remove();
-      });
-    });
-  }
-
-  function mergeAdjacent(root: HTMLElement) {
-    const list = Array.from(root.querySelectorAll(candidates.join(',')));
-    list.forEach(el => {
-      const next = el.nextSibling;
-      if (next instanceof HTMLElement && isMatch(next)) {
-        while (next.firstChild) el.appendChild(next.firstChild);
-        next.remove();
-      }
-    });
-  }
-  if (range.collapsed) {
-    let inside = false;
-    let n: Node | null = range.startContainer;
-    while (n && n !== root) {
-      if (n instanceof HTMLElement && isMatch(n)) {
-        inside = true;
-        break;
-      }
-      n = n.parentNode;
-    }
-
-    if (inside && n instanceof HTMLElement) {
-      unwrap(n);
-    } else {
-      const elm = document.createElement(tag);
-      if (attrs)
-        Object.entries(attrs).forEach(([k, v]) => elm.setAttribute(k, v));
-      elm.appendChild(document.createTextNode('\u200b'));
-      range.insertNode(elm);
-      range.setStart(elm.firstChild!, 1);
-      range.collapse(true);
-      sel.removeAllRanges();
-      sel.addRange(range);
-    }
-
-    removeEmptyAndNested(root);
-    mergeAdjacent(root);
-    return;
-  }
-  if (range.startContainer.nodeType === Node.TEXT_NODE)
-    (range.startContainer as Text).splitText(range.startOffset);
-  if (range.endContainer.nodeType === Node.TEXT_NODE)
-    (range.endContainer as Text).splitText(range.endOffset);
-  const walker = document.createTreeWalker(
-    range.commonAncestorContainer,
-    NodeFilter.SHOW_TEXT,
-    {
-      acceptNode: n => {
-        if (!n.nodeValue?.trim()) return NodeFilter.FILTER_REJECT;
-        const r = document.createRange();
-        r.selectNodeContents(n);
-        const inter =
-          range.compareBoundaryPoints(Range.END_TO_START, r) < 0 &&
-          range.compareBoundaryPoints(Range.START_TO_END, r) > 0;
-        return inter ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
-      },
-    }
-  );
-
-  const textNodes: Text[] = [];
-  let tn: Node | null;
-  while ((tn = walker.nextNode())) textNodes.push(tn as Text);
-
-  const allInside =
-    textNodes.length > 0 &&
-    textNodes.every(txt => {
-      let n: Node | null = txt;
-      while (n && n !== root) {
-        if (n instanceof HTMLElement && isMatch(n)) return true;
-        n = n.parentNode;
-      }
-      return false;
-    });
-
-  if (allInside) {
-    const first = textNodes[0];
-    const last = textNodes[textNodes.length - 1];
-    const common = first.parentElement?.closest(tag) as HTMLElement | null;
-    if (common && common.contains(last)) {
-      const parent = common.parentNode;
-      if (parent) {
-        const beforeRange = document.createRange();
-        beforeRange.setStartBefore(common);
-        beforeRange.setEndBefore(first);
-        const before = beforeRange.cloneContents();
-
-        const afterRange = document.createRange();
-        afterRange.setStartAfter(last);
-        afterRange.setEndAfter(common);
-        const after = afterRange.cloneContents();
-
-        const middleRange = document.createRange();
-        middleRange.setStartBefore(first);
-        middleRange.setEndAfter(last);
-        const middle = middleRange.extractContents();
-
-        const frag = document.createDocumentFragment();
-        if (before.childNodes.length) {
-          const b = document.createElement(tag);
-          while (before.firstChild) b.appendChild(before.firstChild);
-          frag.appendChild(b);
-        }
-        while (middle.firstChild) frag.appendChild(middle.firstChild);
-        if (after.childNodes.length) {
-          const a = document.createElement(tag);
-          while (after.firstChild) a.appendChild(after.firstChild);
-          frag.appendChild(a);
-        }
-        parent.insertBefore(frag, common);
-        parent.removeChild(common);
-      }
-    } else {
-      textNodes.forEach(txt => {
-        let n: Node | null = txt;
-        while (n && n !== root) {
-          if (n instanceof HTMLElement && isMatch(n)) {
-            unwrap(n);
-            break;
-          }
-          n = n.parentNode;
-        }
-      });
-    }
-  } else {
-    textNodes.forEach(txt => {
-      const skip = txt.parentElement?.closest('a, .mention, nile-mention');
-      if (skip) return;
-      const wrapper = document.createElement(tag);
-      if (attrs)
-        Object.entries(attrs).forEach(([k, v]) => wrapper.setAttribute(k, v));
-      txt.parentNode?.insertBefore(wrapper, txt);
-      wrapper.appendChild(txt);
-    });
-  }
-
-  removeEmptyAndNested(root);
-  mergeAdjacent(root);
-
-  sel.removeAllRanges();
-  sel.addRange(range);
-}
-
-export function surroundInline(
-  range: Range,
-  tag: string,
-  attrs?: Record<string, string>
-) {
-  const wrap = document.createElement(tag);
-  if (attrs) Object.entries(attrs).forEach(([k, v]) => wrap.setAttribute(k, v));
-  try {
-    range.surroundContents(wrap);
-  } catch {
-    const frag = range.extractContents();
-    wrap.appendChild(frag);
-    range.insertNode(wrap);
-  }
-}
-
-export function unwrap(node: HTMLElement) {
-  const p = node.parentNode;
-  if (!p) return;
-  while (node.firstChild) p.insertBefore(node.firstChild, node);
-  p.removeChild(node);
-}
-
-function unwrapAllMatching(
-  node: Node,
-  root: HTMLElement,
-  matcher: (el: HTMLElement) => boolean
-) {
-  let n: Node | null = node.parentNode;
-  while (n && n !== root) {
-    if (n instanceof HTMLElement && matcher(n)) {
-      unwrap(n);
-
-      n = node.parentNode;
-      continue;
-    }
-    n = n.parentNode;
-  }
-}
-
-export function rgbToHex(rgb: string): string {
-  const m = rgb.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/i);
-  if (!m) return '#000000';
-  const r = Number(m[1]).toString(16).padStart(2, '0');
-  const g = Number(m[2]).toString(16).padStart(2, '0');
-  const b = Number(m[3]).toString(16).padStart(2, '0');
-  return `#${r}${g}${b}`;
-}
-
-export function setFontFamily(root: HTMLElement, family: string) {
-  const sel = document.getSelection();
-  if (!sel || sel.rangeCount === 0) return;
-  const range = sel.getRangeAt(0);
-  if (range.collapsed) {
-    const span = document.createElement('span');
-    span.style.fontFamily = family;
-    span.appendChild(document.createTextNode('\u200b'));
-    range.insertNode(span);
-    const r = document.createRange();
-    r.setStart(span.firstChild!, 1);
-    r.collapse(true);
-    sel.removeAllRanges();
-    sel.addRange(r);
-    return;
-  }
-  surroundInline(range, 'span', { style: `font-family:${family}` });
-}

package/src/nile-rich-text-editor/utils/link-utils.ts

@@ -1,50 +0,0 @@
-export function insertOrEditLink(root: HTMLElement, href?: string) {
-  const sel = document.getSelection();
-  if (!sel || sel.rangeCount === 0) return;
-  const range = sel.getRangeAt(0);
-
-  let n: Node | null = range.startContainer;
-  let a: HTMLAnchorElement | null = null;
-  while (n && n !== root) {
-    if (n instanceof HTMLAnchorElement) {
-      a = n;
-      break;
-    }
-    n = n.parentNode;
-  }
-
-  const url =
-    href ??
-    (typeof window !== 'undefined'
-      ? window.prompt('Enter URL', a?.href || 'https://') || ''
-      : '');
-  if (!url) return;
-
-  if (a) {
-    a.href = url;
-    return;
-  }
-
-  if (range.collapsed) {
-    const link = document.createElement('a');
-    link.href = url;
-    link.textContent = url;
-    range.insertNode(link);
-    const r = document.createRange();
-    r.setStartAfter(link);
-    r.collapse(true);
-    sel?.removeAllRanges();
-    sel.addRange(r);
-    return;
-  }
-
-  const link = document.createElement('a');
-  link.href = url;
-  try {
-    range.surroundContents(link);
-  } catch {
-    const frag = range.extractContents();
-    link.appendChild(frag);
-    range.insertNode(link);
-  }
-}

package/src/nile-rich-text-editor/utils/list-utils.ts

@@ -1,147 +0,0 @@
-export function toggleList(root: HTMLElement, kind: 'ul' | 'ol') {
-  const sel = document.getSelection();
-  if (!sel || sel.rangeCount === 0) return;
-  const range = sel.getRangeAt(0);
-  function styleList(list: HTMLElement) {
-    list.style.paddingInlineStart = '0';
-    list.style.margin = '0';
-  }
-
-  function isEmptyBlock(el: HTMLElement) {
-    return !el.textContent?.trim() && !el.querySelector('img,br');
-  }
-
-  function setCursorInside(el: HTMLElement) {
-    const selection = document.getSelection();
-    if (!selection) return;
-    const r = document.createRange();
-    r.selectNodeContents(el);
-    r.collapse(true);
-    selection.removeAllRanges();
-    selection.addRange(r);
-  }
-
-  function closestBlock(node: Node | null): HTMLElement | null {
-    while (node && node !== root) {
-      if (node instanceof HTMLElement) {
-        const display = getComputedStyle(node).display;
-        if (
-          node.tagName.match(/^(P|DIV|H[1-6]|LI)$/) ||
-          display === 'block' ||
-          display === 'list-item'
-        )
-          return node;
-      }
-      node = node.parentNode;
-    }
-    return null;
-  }
-
-  function unwrapList(list: HTMLElement) {
-    const frag = document.createDocumentFragment();
-    (Array.from(list.querySelectorAll('li')) as HTMLElement[]).forEach(li => {
-      const p = document.createElement('p');
-      if (li.style.textAlign) p.style.textAlign = li.style.textAlign;
-      while (li.firstChild) p.appendChild(li.firstChild);
-      frag.appendChild(p);
-    });
-    list.replaceWith(frag);
-  }
-
-  function unwrapListItem(block: HTMLElement) {
-    const li = block.closest('li');
-    if (!li) return;
-    const list = li.parentElement as HTMLElement;
-    const p = document.createElement('p');
-    if (li.style.textAlign) p.style.textAlign = li.style.textAlign;
-    while (li.firstChild) p.appendChild(li.firstChild);
-    list.parentNode?.insertBefore(p, list.nextSibling);
-    li.remove();
-    if (list.childNodes.length === 0) list.remove();
-    setCursorInside(p);
-  }
-
-  function switchListType(list: HTMLElement, newType: 'ul' | 'ol') {
-    const newList = document.createElement(newType);
-    styleList(newList);
-    while (list.firstChild) newList.appendChild(list.firstChild);
-    list.replaceWith(newList);
-  }
-  if (range.collapsed) {
-    const block = closestBlock(range.startContainer);
-    const insideList = block?.closest('ul,ol') as HTMLElement | null;
-    if (insideList && insideList.tagName.toLowerCase() === kind) {
-      unwrapListItem(block as HTMLElement);
-      return;
-    }
-
-    if (insideList && insideList.tagName.toLowerCase() !== kind) {
-      switchListType(insideList, kind);
-      return;
-    }
-    if (
-      !block ||
-      block === root ||
-      block.childNodes.length === 0 ||
-      isEmptyBlock(block)
-    ) {
-      const list = document.createElement(kind);
-      const li = document.createElement('li');
-      li.appendChild(document.createElement('br'));
-      list.appendChild(li);
-      styleList(list);
-      range.insertNode(list);
-      setCursorInside(li);
-      return;
-    }
-    const list = document.createElement(kind);
-    styleList(list);
-    const li = document.createElement('li');
-    if (block.style.textAlign) li.style.textAlign = block.style.textAlign;
-    while (block.firstChild) li.appendChild(block.firstChild);
-    list.appendChild(li);
-    block.replaceWith(list);
-    setCursorInside(li);
-    return;
-  }
-
-  const blocks: HTMLElement[] = [];
-  const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT, {
-    acceptNode: n => {
-      if (!(n instanceof HTMLElement)) return NodeFilter.FILTER_SKIP;
-      if (!/^(P|DIV|LI|H[1-6])$/.test(n.tagName)) return NodeFilter.FILTER_SKIP;
-      const r = document.createRange();
-      r.selectNodeContents(n);
-      const intersects =
-        range.compareBoundaryPoints(Range.END_TO_START, r) < 0 &&
-        range.compareBoundaryPoints(Range.START_TO_END, r) > 0;
-      return intersects ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
-    },
-  });
-  let n: Node | null;
-  while ((n = walker.nextNode())) blocks.push(n as HTMLElement);
-
-  if (blocks.length === 0) {
-    const block = closestBlock(range.startContainer);
-    if (block) blocks.push(block);
-  }
-
-  const firstLi = blocks[0].closest('li');
-  if (firstLi) {
-    const currentList = firstLi.closest('ul,ol') as HTMLElement | null;
-    if (!currentList) return;
-    if (currentList.tagName.toLowerCase() === kind) unwrapList(currentList);
-    else switchListType(currentList, kind);
-    return;
-  }
-  const newList = document.createElement(kind);
-  styleList(newList);
-  for (const block of blocks) {
-    const li = document.createElement('li');
-    if (block.style.textAlign) li.style.textAlign = block.style.textAlign;
-    while (block.firstChild) li.appendChild(block.firstChild);
-    newList.appendChild(li);
-  }
-  blocks[0].replaceWith(newList);
-  for (let i = 1; i < blocks.length; i++) blocks[i].remove();
-}

package/src/nile-section-message/index.ts

@@ -1 +0,0 @@
-export { NileSectionMessage } from './nile-section-message';

package/src/nile-section-message/nile-section-message.css.ts

@@ -1,130 +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';
-
-/**
- * SectionMessage CSS
- */
-export const styles = css`
-  :host {
-    display: block;
-    width: 100%;
-    box-sizing: border-box;
-    --icon-button-background-color: var(--nile-colors-primary-600, var(--ng-colors-bg-primary-alt));
-    min-width: var(--nile-width-width-xxs, var(--ng-width-80));
-    -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));
-  }
-
-  .parent__wrapper {
-    width: auto;
-    display: flex;
-    gap: var(--nile-spacing-lg, var(--ng-spacing-xl));
-    box-sizing: border-box;
-    padding: var(--nile-type-scale-4, var(--ng-spacing-xl));
-    word-wrap: break-word;
-    align-items: center;
-    border: var(--nile-border-width-0, var(--ng-border-width-1)) solid var(--nile-section-message-background-color-primary, var(--ng-colors-border-secondary-alt));
-    border-radius: var(--nile-spacing-xs, var(--ng-radius-xl));
-    box-shadow: var(--nile-box-shadow-none, var(--ng-shadow-lg));
-  }
-
-  .section--primary {
-    background-color: var(--nile-section-message-background-color-primary, var(--ng-colors-bg-primary-alt));
-  }
-
-  .section--success {
-    background-color: var(--nile-section-message-background-color-success, var(--ng-colors-bg-primary-alt));
-  }
-
-  .section--warning {
-    background-color: var(--nile-section-message-background-color-warning, var(--ng-colors-bg-primary-alt));
-  }
-
-  .section--error {
-    background-color: var(--nile-section-message-background-color-error, var(--ng-colors-bg-primary-alt));
-  }
-
-  .left__wrapper {
-    align-self: start;
-    height: auto;
-  }
-
-  nile-icon-button::part(base) {
-    background-color: var(--icon-button-background-color, var(--ng-colors-bg-primary-alt));
-    color: var(--nile-colors-dark-900, var(--ng-colors-text-brand-secondary-700));
-  }
-
-  .icon--primary {
-    --icon-button-background-color: var(
-      --nile-section-message-icon-background-color-primary,
-    var(--ng-colors-bg-primary-alt));
-  }
-
-  .icon--success {
-    --icon-button-background-color: var(
-      --nile-section-message-icon-background-color-success
-    );
-  }
-
-  .icon--warning {
-    --icon-button-background-color: var(
-      --nile-section-message-icon-background-color-warning
-    );
-  }
-
-  .icon--error {
-    --icon-button-background-color: var(
-      --nile-section-message-icon-background-color-error
-    );
-  }
-
-  .right__wrapper {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    width: 100%;
-    gap: var(--nile-spacing-lg, var(--ng-spacing-lg));
-    color: var(--nile-colors-dark-900, var(--ng-colors-fg-primary-900));
-    font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));
-    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
-    font-style: normal;
-    line-height: 140%;
-    letter-spacing: 0.2px;
-  }
-
-  .section__heading {
-    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-semibold));
-  }
-
-  .section__description {
-    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
-    color: var(--nile-colors-dark-900, var(--ng-colors-fg-secondary-700));
-  }
-
-  .footer__actions {
-    display: flex;
-    gap: var(--nile-spacing-md, var(--ng-spacing-none));
-    color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));
-    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-semibold));
-    cursor: pointer;
-  }
-
-  ::slotted([slot='footer__actions']:not(:last-child)) {
-    color: var(--nile-colors-primary-600, var(--ng-colors-text-tertiary-600));
-  }
-
-  ::slotted([slot='footer__actions']:not(:last-child))::after {
-    content: '•';
-    color: var(--nile-section-message-footer-color, var(--ng-componentcolors-alpha-white-100));
-    margin-left: var(--nile-spacing-md, var(--ng-spacing-md));
-  }
-`;
-
-export default [styles];

package/src/nile-section-message/nile-section-message.ts

@@ -1,127 +0,0 @@
-import {
-  LitElement,
-  html,
-  CSSResultArray,
-  TemplateResult,
-} from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { styles } from './nile-section-message.css';
-import NileElement from '../internal/nile-element';
-import { HasSlotController } from '../internal/slot';
-
-@customElement('nile-section-message')
-export class NileSectionMessage extends NileElement {
-  public static get styles(): CSSResultArray {
-    return [styles];
-  }
-
-  private readonly hasSlotController = new HasSlotController(
-    this,
-    'section__heading',
-    'section__description',
-    'footer__actions'
-  );
-
-  @property({ type: String, attribute: 'heading' }) heading: string = '';
-  @property({ type: String, attribute: 'description' }) description: string =
-    '';
-
-  // error tick warning
-  @property({ type: Number, attribute: 'icon-size' }) iconSize: number = 16;
-
-  /** The section message theme variant. */
-  @property() variant: 'primary' | 'success' | 'warning' | 'error' = 'primary';
-
-  iconMap = {
-    primary: 'var(--nile-icon-info, var(--ng-icon-info-circle))',
-    success: 'var(--nile-icon-done-02, var(--ng-icon-check-circle-broken))',
-    warning: 'var(--nile-icon-warning, var(--ng-icon-alert-circle))',
-    error: 'var(--nile-icon-warning, var(--ng-icon-alert-circle))',
-  };
-
-  connectedCallback() {
-    super.connectedCallback();
-    this.updateComplete.then(() => {
-      this.addActionSeparators();
-    });
-  }
-
-  private addActionSeparators() {
-    const slot = this.shadowRoot?.querySelector(
-      'slot[name="footer__actions"]'
-    ) as any;
-  }
-
-  public render(): TemplateResult {
-    const hasHeader =
-      this.hasSlotController.test('section__heading') || this.heading;
-    const hasDescription =
-      this.hasSlotController.test('section__description') || this.description;
-    const hasFooter = this.hasSlotController.test('footer__actions');
-    return html`
-      <div
-        part="parent__wrapper"
-        class=${classMap({
-          parent__wrapper: true,
-          'section--primary': this.variant === 'primary',
-          'section--success': this.variant === 'success',
-          'section--warning': this.variant === 'warning',
-          'section--error': this.variant === 'error',
-        })}
-      >
-        <div
-          class=${classMap({
-            left__wrapper: true,
-            'icon--primary': this.variant === 'primary',
-            'icon--success': this.variant === 'success',
-            'icon--warning': this.variant === 'warning',
-            'icon--error': this.variant === 'error',
-          })}
-          part="icon__wrapper"
-        >
-          <slot name="icon">
-            <nile-icon-button
-              name="${this.iconMap[this.variant]}"  
-              size="${this.iconSize}"
-              color="var(--nile-colors-white-base, white)"
-            >
-            </nile-icon-button>
-          </slot>
-        </div>
-        <div class="right__wrapper" part="content__wrapper">
-          ${hasHeader
-            ? html` <slot name="section__heading" class="section__heading">
-                <div part="section__heading">${this.heading}</div>
-              </slot>`
-            : null}
-          ${hasDescription
-            ? html` <slot
-                name="section__description"
-                class="section__description"
-              >
-                <div part="section__description">${this.description}</div>
-              </slot>`
-            : null}
-          ${hasFooter
-            ? html`
-                <slot
-                  name="footer__actions"
-                  part="footer__actions"
-                  class="footer__actions"
-                ></slot>
-              `
-            : ``}
-        </div>
-      </div>
-    `;
-  }
-}
-
-export default NileSectionMessage;
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'nile-section-message': NileSectionMessage;
-  }
-}