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

package/src/nile-lightdomeditor/nile-lightdomeditor.ts

@@ -0,0 +1,523 @@
+import { LitElement, html, TemplateResult } from 'lit';
+import { customElement, query, state, property } from 'lit/decorators.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { styles } from './nile-lightdomeditor.css';
+
+/**
+ * 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.
+ */
+
+export interface MentionItem {
+  key: string;
+  label: string;
+}
+
+/**
+ * Map of trigger characters to arrays of MentionItem
+ */
+export type MentionsConfig = Record<string, MentionItem[]>;
+
+@customElement('nile-lightdomeditor')
+export class NileLightdomeditor extends LitElement {
+  
+  protected createRenderRoot() {
+    return this;
+  }
+ 
+  @property({ type: String })
+  toolbar: string = '';
+
+  @property({
+    attribute: 'mentions',
+    converter: {
+      fromAttribute: (value: string): MentionsConfig => {
+        try {
+          const parsed = JSON.parse(value);
+          const result: MentionsConfig = {};
+          for (const trigger of Object.keys(parsed)) {
+            const items = parsed[trigger];
+            if (Array.isArray(items)) {
+              result[trigger] = items
+                .filter((i: any) => i && typeof i.key === 'string' && typeof i.label === 'string')
+                .map((i: any) => ({ key: i.key, label: i.label }));
+            }
+          }
+          return result;
+        } catch {
+          return {};
+        }
+      },
+      toAttribute: (value: MentionsConfig): string => JSON.stringify(value)
+    }
+  })
+  mentions: MentionsConfig = {};
+
+
+    // Mention-related state
+    @state() private mentionOpen = false;
+    @state() private mentionTrigger: string | null = null;
+    @state() private mentionQuery = '';
+    @state() private mentionSuggestions: MentionItem[] = [];
+    @state() private mentionFiltered: MentionItem[] = [];
+    @state() private mentionX = 0;
+    @state() private mentionY = 0;
+
+ 
+
+  @query('.editor') private editor!: HTMLElement;
+  @query('#imageInput') private imageInput!: HTMLInputElement;
+  @state() private previewHTML = '';
+  @state() private characterCount = 0;
+  @state() private wordCount = 0;
+  private lastRange: Range | null = null;
+
+  /**
+   * Map of toolbar keys to render functions with icons
+   * Each function receives the component instance to call instance methods
+   */
+  private static TOOLBAR_CONFIG: Record<string, (self: NileLightdomeditor) => TemplateResult> = {
+    bold: self => html`<button type="button" @click="${() => self.format('b')}" title="Bold" class="format-btn">
+      <strong>B</strong>
+    </button>`,
+    italic: self => html`<button type="button" @click="${() => self.format('i')}" title="Italic" class="format-btn">
+      <em>I</em>
+    </button>`,
+    underline: self => html`<button type="button" @click="${() => self.format('u')}" title="Underline" class="format-btn">
+      <u>U</u>
+    </button>`,
+    font: self => html`
+      <select @change="${(e: Event) => self.formatFontFamily((e.target as HTMLSelectElement).value)}" class="font-select">
+        <option value="">Arial</option>
+        <option value="Arial, sans-serif">Arial</option>
+        <option value="'Times New Roman', serif">Times New Roman</option>
+        <option value="'Courier New', monospace">Courier New</option>
+        <option value="Georgia, serif">Georgia</option>
+        <option value="Verdana, sans-serif">Verdana</option>
+        <option value="'Comic Sans MS', cursive">Comic Sans MS</option>
+        <option value="Impact, sans-serif">Impact</option>
+      </select>`,
+    fontsize: self => html`
+      <select @change="${(e: Event) => self.formatFontSize((e.target as HTMLSelectElement).value)}" class="fontsize-select">
+        <option value="8px">8px</option>
+        <option value="10px">10p</option>
+        <option value="12px">12p</option>
+        <option value="14px">14p</option>
+        <option value="16px">16p</option>
+        <option value="18px">18p</option>
+        <option value="24px">24p</option>
+        <option value="32px">32p</option>
+        <option value="48px">48p</option>
+        <option value="72px">72p</option>
+      </select>`,
+    color: self => html`
+      <label class="color-picker text-color" title="Text Color">
+        <span class="color-icon">T</span>
+        <div class="color-bar" style="background-color: #000;"></div>
+        <input type="color" @input="${(e: Event) => self.formatColor((e.target as HTMLInputElement).value)}" />
+      </label>`,
+    background: self => html`
+      <label class="color-picker highlight-color" title="Highlight Color">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+          <path d="M16.56 8.94L7.62 0 6.21 1.41l2.38 2.38L5.04 7.34c-.39.39-.39 1.02 0 1.41l5.66 5.66c.39.39 1.02.39 1.41 0l3.54-3.54c.39-.39.39-1.02 0-1.41l-2.38-2.38L15.15 5.3l1.41 1.41-1.41 1.41 1.41 1.41-.39.39z"/>
+        </svg>
+        <input type="color" @input="${(e: Event) => self.formatBackgroundColor((e.target as HTMLInputElement).value)}" />
+      </label>`,
+    border: self => html`<button type="button" @click="${() => self.toggleBorder()}" title="Border" class="format-btn">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+        <path d="M3 3v18h18V3H3zm16 16H5V5h14v14z"/>
+      </svg>
+    </button>`,
+    heading: self => html`
+      <select @change="${(e: Event) => self.formatHeadingFromDropdown((e.target as HTMLSelectElement).value)}" class="heading-select">
+        <option value="p">Normal</option>
+        <option value="h1">Heading 1</option>
+        <option value="h2">Heading 2</option>
+        <option value="h3">Heading 3</option>
+        <option value="h4">Heading 4</option>
+        <option value="h5">Heading 5</option>
+        <option value="h6">Heading 6</option>
+      </select>`,
+    left: self => html`<button type="button" @click="${() => self.formatAlign('left')}" title="Align Left" class="format-btn">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+        <path d="M3 3h18v2H3V3zm0 4h12v2H3V7zm0 4h18v2H3v-2zm0 4h12v2H3v-2zm0 4h18v2H3v-2z"/>
+      </svg>
+    </button>`,
+    center: self => html`<button type="button" @click="${() => self.formatAlign('center')}" title="Align Center" class="format-btn">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+        <path d="M3 3h18v2H3V3zm3 4h12v2H6V7zm-3 4h18v2H3v-2zm3 4h12v2H6v-2zm-3 4h18v2H3v-2z"/>
+      </svg>
+    </button>`,
+    right: self => html`<button type="button" @click="${() => self.formatAlign('right')}" title="Align Right" class="format-btn">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+        <path d="M3 3h18v2H3V3zm6 4h12v2H9V7zm-6 4h18v2H3v-2zm6 4h12v2H9v-2zm-6 4h18v2H3v-2z"/>
+      </svg>
+    </button>`,
+    justify: self => html`<button type="button" @click="${() => self.formatAlign('justify')}" title="Justify" class="format-btn">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+        <path d="M3 3h18v2H3V3zm0 4h18v2H3V7zm0 4h18v2H3v-2zm0 4h18v2H3v-2zm0 4h18v2H3v-2z"/>
+      </svg>
+    </button>`,
+    ul: self => html`<button type="button" @click="${() => self.formatList('ul')}" title="Bulleted List" class="format-btn">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+        <path d="M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zM7 19h14v-2H7v2zm0-6h14v-2H7v2zm0-8v2h14V5H7z"/>
+      </svg>
+    </button>`,
+    ol: self => html`<button type="button" @click="${() => self.formatList('ol')}" title="Numbered List" class="format-btn">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+        <path d="M2 17h2v.5H3v1h1v.5H2v1h3v-4H2v1zm1-9h1V4H2v1h1v3zm-1 3h1.8L2 13.1v.9h3v-1H3.2L5 10.9V10H2v1zm5-6v2h14V5H7zm0 14h14v-2H7v2zm0-6h14v-2H7v2z"/>
+      </svg>
+    </button>`,
+    link: self => html`<button type="button" @click="${() => self.promptLink()}" title="Insert Link" class="format-btn">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+        <path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"/>
+      </svg>
+    </button>`,
+    // image: self => html`<button type="button" @click="${() => self.promptImage()}" title="Insert Image" class="format-btn">
+    //   <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+    //     <path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/>
+    //   </svg>
+    // </button>`,
+    hr: self => html`<button type="button" @click="${() => self.insertHorizontalRule()}" title="Horizontal Rule" class="format-btn">
+      <span style="font-weight: bold;">—</span>
+    </button>`,
+    // quote: self => html`<button type="button" @click="${() => self.formatQuote()}" title="Quote" class="format-btn">
+    //   <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+    //     <path d="M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z"/>
+    //   </svg>
+    // </button>`,
+    // code: self => html`<button type="button" @click="${() => self.formatCode()}" title="Code" class="format-btn">
+    //   <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+    //     <path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0L19.2 12l-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"/>
+    //   </svg>
+    // </button>`,
+  };
+
+  // Default toolbar layout matching the design
+  private get parsedToolbar(): string[] {
+    if (this.toolbar) {
+      return this.toolbar.split(',').map(k => k.trim()).filter(k => 
+        Object.keys((this.constructor as typeof NileLightdomeditor).TOOLBAR_CONFIG).includes(k)
+      );
+    }
+    // Default layout matching the design
+    return ['bold', 'italic', 'underline', 'font', 'fontsize', 'color', 'background', 'border', 'left', 'center', 'right', 'justify', 'ul', 'ol', 'heading', 'link',  'hr',  ]; //'quote', 'code', 'image', 
+  }
+
+  render() {
+  return html`
+  <style>
+    ${styles}
+  </style>
+
+    <input id="imageInput" type="file" accept="image/*" @change="${this.onImageSelected}" />
+
+    <div class="editor-container">
+      <div class="toolbar">
+        ${this.parsedToolbar.map(key => NileLightdomeditor.TOOLBAR_CONFIG[key](this))}
+      </div>
+      <div
+  class="editor"
+  contenteditable="true"
+  @keydown="${(e: KeyboardEvent) => this.onKeyDown(e)}"
+  @keyup="${(e: KeyboardEvent) => this.onKeyUp(e)}"
+  @input="${() => this.syncPreview()}"
+  @mouseup="${() => this.saveSelection()}"
+></div>
+
+     
+      ${this.mentionOpen ? html`
+        <ul class="mention-dropdown" style="top:${this.mentionY}px; left:${this.mentionX}px">
+          ${this.mentionFiltered.map(item => html`<li @mousedown=${() => this.selectMention(item)}>${item.label}</li>`)}
+          <!-- ${this.mentionFiltered.map(item => html`<li @mousedown=…>${item.label}</li>`)} -->
+
+        </ul>
+      ` : ''}
+      
+      <div class="status-bar">
+        <span>Characters: ${this.characterCount}</span>
+        <span>Words: ${this.wordCount}</span>
+      </div>
+    </div>
+
+    <h3>Preview</h3>
+    <div class="preview">
+      <div class="content">${unsafeHTML(this.previewHTML)}</div>
+    </div>
+  `;
+}
+
+
+private onKeyUp(e: KeyboardEvent) {
+  const key = e.key;
+  // always keep lastRange up to date
+  this.saveSelection();
+
+  // if we just typed a trigger and dropdown is closed, open it
+  if (!this.mentionOpen && this.mentions[key]) {
+    this.openMention(key);
+  }
+}
+
+
+
+private onKeyDown(e: KeyboardEvent) {
+  if (!this.mentionOpen) return;
+
+  const key = e.key;
+  if (key === 'ArrowDown' || key === 'ArrowUp' || key === 'Enter') {
+    e.preventDefault();
+    if (key === 'Enter' && this.mentionFiltered.length) {
+      this.selectMention(this.mentionFiltered[0]);
+    }
+  }
+}
+
+
+private openMention(trigger: string) {
+  this.saveSelection();
+  if (!this.lastRange) return;
+
+  const caretRange = this.lastRange.cloneRange();
+  caretRange.collapse(false);
+  const rects = caretRange.getClientRects();
+  if (!rects.length) {
+    console.error('no caret rect; is the range in a text node?');
+    return;
+  }
+  const caretRect = rects[0];
+
+  const container = this.editor.closest('.editor-container') as HTMLElement;
+  const anchorRect = container
+    ? container.getBoundingClientRect()
+    : this.editor.getBoundingClientRect();
+
+  this.mentionX = caretRect.left  - anchorRect.left + (this.editor.scrollLeft || 0);
+  this.mentionY = caretRect.bottom - anchorRect.top  + (this.editor.scrollTop  || 0);
+
+  this.mentionTrigger     = trigger;
+  this.mentionSuggestions = this.mentions[trigger] || [];
+  this.mentionQuery       = '';
+  this.updateMentionFiltered();
+  this.mentionOpen        = true;
+}
+
+
+
+
+
+
+
+
+private closeMention() {
+  this.mentionOpen = false;
+  this.mentionTrigger = null;
+}
+
+private handleMention() {
+  if (!this.mentionOpen || !this.mentionTrigger) return;
+  const sel = window.getSelection(); if (!sel || !sel.anchorNode) return;
+  const text = sel.anchorNode.textContent || '';
+  const idx = text.lastIndexOf(this.mentionTrigger);
+  if (idx >= 0) {
+    this.mentionQuery = text.substring(idx + 1);
+    this.updateMentionFiltered();
+  } else {
+    this.closeMention();
+  }
+}
+
+private updateMentionFiltered() {
+  const q = this.mentionQuery.toLowerCase();
+  this.mentionFiltered = this.mentionSuggestions.filter(item =>
+    item.label.toLowerCase().startsWith(q)
+  );
+}
+
+private selectMention(item: MentionItem) {
+  this.restoreSelection(); if (!this.lastRange || !this.mentionTrigger) return;
+  let node = this.lastRange.startContainer; let offset = this.lastRange.startOffset;
+  if (node.nodeType !== Node.TEXT_NODE) {
+    const child = node.childNodes[offset];
+    if (child?.nodeType === Node.TEXT_NODE) { node = child; offset = 0; } else return;
+  }
+  const textNode = node as Text;
+  const text = textNode.textContent || '';
+  const atIndex = text.lastIndexOf(this.mentionTrigger, offset);
+  if (atIndex < 0) return;
+  const endIndex = atIndex + 1 + this.mentionQuery.length;
+  const mentionRange = document.createRange();
+  mentionRange.setStart(textNode, atIndex);
+  mentionRange.setEnd(textNode, endIndex);
+  mentionRange.deleteContents();
+  const span = document.createElement('span'); span.classList.add('mention');
+  span.textContent = `${this.mentionTrigger}${item.key}`;
+  mentionRange.insertNode(span);
+  const spaceNode = document.createTextNode('\u00A0'); span.after(spaceNode);
+  const sel = window.getSelection(); const afterRange = document.createRange();
+  afterRange.setStartAfter(spaceNode); afterRange.collapse(true);
+  sel?.removeAllRanges(); sel?.addRange(afterRange);
+  this.lastRange = afterRange.cloneRange();
+  this.closeMention(); this.syncPreview();
+}
+
+private saveSelection() {
+  const sel = window.getSelection(); if (sel && sel.rangeCount) this.lastRange = sel.getRangeAt(0).cloneRange();
+}
+
+private restoreSelection() {
+  const sel = window.getSelection(); sel?.removeAllRanges(); if (this.lastRange) sel?.addRange(this.lastRange);
+}
+
+  private format(tag: 'b' | 'i' | 'u') {
+    this.restoreSelection(); if (!this.lastRange) return;
+    const el = document.createElement(tag); el.appendChild(this.lastRange.extractContents()); this.lastRange.insertNode(el); this.afterEdit(el);
+  }
+
+  private formatHeadingFromDropdown(tag: string) {
+    if (!tag) return;
+    this.restoreSelection(); if (!this.lastRange) return;
+    
+    let node: Node | null = this.lastRange.startContainer;
+    while (node && node !== this.editor && !(node instanceof HTMLElement && /^(H[1-6]|P|DIV)$/i.test(node.tagName))) {
+      node = node.parentNode;
+    }
+    
+    if (node instanceof HTMLElement && node !== this.editor) {
+      const replacement = document.createElement(tag);
+      replacement.innerHTML = node.innerHTML;
+      node.replaceWith(replacement);
+      this.afterEdit(replacement);
+      return;
+    }
+    
+    const el = document.createElement(tag);
+    el.appendChild(this.lastRange.extractContents());
+    this.lastRange.insertNode(el);
+    this.afterEdit(el);
+  }
+
+  private formatAlign(alignment: 'left' | 'center' | 'right' | 'justify') {
+    this.restoreSelection(); if (!this.lastRange) return;
+    let node: Node | null = this.lastRange.startContainer;
+    while (node && node !== this.editor && !(node instanceof HTMLElement && getComputedStyle(node).display === 'block')) node = node.parentNode;
+    if (node instanceof HTMLElement && node !== this.editor) {
+      node.style.textAlign = node.style.textAlign === alignment ? '' : alignment; this.afterEdit(node); return;
+    }
+    const wrapper = document.createElement('div'); wrapper.style.textAlign = alignment;
+    wrapper.appendChild(this.lastRange.extractContents()); this.lastRange.insertNode(wrapper); this.afterEdit(wrapper);
+  }
+
+  private formatList(type: 'ul' | 'ol') {
+    this.restoreSelection(); if (!this.lastRange) return;
+    const list = document.createElement(type);
+    const frag = this.lastRange.extractContents(); const temp = document.createElement('div'); temp.appendChild(frag);
+    temp.childNodes.forEach(n => { const li = document.createElement('li'); li.appendChild(n); list.appendChild(li); });
+    this.lastRange.insertNode(list); this.afterEdit(list);
+  }
+
+  private promptLink() {
+    const url = prompt('Enter URL:', 'https://'); if (url) this.formatLink(url);
+  }
+
+  private formatColor(color: string) {
+    this.restoreSelection(); if (!this.lastRange) return;
+    const span = document.createElement('span'); span.style.color = color;
+    span.appendChild(this.lastRange.extractContents()); this.lastRange.insertNode(span); this.afterEdit(span);
+    // Update color bar
+    const colorBar = this.querySelector('.color-bar') as HTMLElement;
+    if (colorBar) colorBar.style.backgroundColor = color;
+  }
+
+  private formatBackgroundColor(color: string) {
+    this.restoreSelection(); if (!this.lastRange) return;
+    const span = document.createElement('span'); span.style.backgroundColor = color;
+    span.appendChild(this.lastRange.extractContents()); this.lastRange.insertNode(span); this.afterEdit(span);
+  }
+
+  private formatLink(href: string) {
+    this.restoreSelection(); if (!this.lastRange) return;
+    const a = document.createElement('a'); a.href = href; a.target = '_blank'; a.rel = 'noopener';
+    a.appendChild(this.lastRange.extractContents()); this.lastRange.insertNode(a); this.afterEdit(a);
+  }
+
+  private promptImage() { this.imageInput.value = ''; this.imageInput.click(); }
+
+  private onImageSelected(e: Event) {
+    const input = e.target as HTMLInputElement;
+    if (input.files?.length) {
+      const reader = new FileReader(); reader.onload = () => this.formatImage(reader.result as string);
+      reader.readAsDataURL(input.files[0]);
+    }
+  }
+
+  private formatImage(src: string) {
+    this.restoreSelection(); if (!this.lastRange) return;
+    const img = document.createElement('img'); img.src = src; img.alt = 'Image';
+    this.lastRange.insertNode(img); this.afterEdit(img);
+  }
+
+  private formatFontFamily(font: string) {
+    if (!font) return; this.restoreSelection(); if (!this.lastRange) return;
+    const span = document.createElement('span'); span.style.fontFamily = font;
+    span.appendChild(this.lastRange.extractContents()); this.lastRange.insertNode(span); this.afterEdit(span);
+  }
+
+  private formatFontSize(size: string) {
+    if (!size) return; this.restoreSelection(); if (!this.lastRange) return;
+    const span = document.createElement('span'); span.style.fontSize = size;
+    span.appendChild(this.lastRange.extractContents()); this.lastRange.insertNode(span); this.afterEdit(span);
+  }
+
+  private toggleBorder() {
+    this.restoreSelection(); if (!this.lastRange) return;
+    const span = document.createElement('span'); 
+    span.style.border = '1px solid #000'; span.style.padding = '2px';
+    span.appendChild(this.lastRange.extractContents()); this.lastRange.insertNode(span); this.afterEdit(span);
+  }
+
+  private insertHorizontalRule() {
+    this.restoreSelection(); if (!this.lastRange) return;
+    const hr = document.createElement('hr');
+    this.lastRange.insertNode(hr); this.afterEdit(hr);
+  }
+
+  private formatQuote() {
+    this.restoreSelection(); if (!this.lastRange) return;
+    const blockquote = document.createElement('blockquote');
+    blockquote.appendChild(this.lastRange.extractContents());
+    this.lastRange.insertNode(blockquote); this.afterEdit(blockquote);
+  }
+
+  private formatCode() {
+    this.restoreSelection(); if (!this.lastRange) return;
+    const code = document.createElement('code');
+    code.appendChild(this.lastRange.extractContents());
+    this.lastRange.insertNode(code); this.afterEdit(code);
+  }
+
+ 
+
+  private afterEdit(node: Node) {
+    const range = document.createRange(); range.setStartAfter(node); range.collapse(true);
+    const sel = window.getSelection(); sel?.removeAllRanges(); sel?.addRange(range);
+    this.saveSelection(); this.syncPreview();
+  }
+
+  private updateCounts() {
+    const text = this.editor.textContent || '';
+    this.characterCount = text.length;
+    this.wordCount = text.trim() ? text.trim().split(/\s+/).length : 0;
+  }
+
+  private syncPreview() {
+    this.previewHTML = this.editor.innerHTML;
+    this.updateCounts();
+    console.log('nile-lightdomeditor content-changed:', this.previewHTML);
+    this.dispatchEvent(new CustomEvent('content-changed', { detail: { html: this.previewHTML }, bubbles: true, composed: true }));
+  }
+}
+
+declare global { interface HTMLElementTagNameMap { 'nile-lightdomeditor': NileLightdomeditor; } }

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

@@ -38,7 +38,7 @@ export const styles = css`
 
   .menu__items-wrapper {
     overflow: auto;
-    max-height: calc(100vh - 64px);
+    max-height: var(--auto-size-available-height);
   }
 
   ::slotted(nile-divider) {

package/src/nile-option/nile-option.ts

@@ -12,7 +12,7 @@ import { classMap } from 'lit/directives/class-map.js';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { html } from 'lit';
 import { watch } from '../internal/watch';
-import type { CSSResultGroup } from 'lit';
+import type { CSSResultGroup, PropertyValues } from 'lit';
 import NileElement from '../internal/nile-element';
 import '../nile-checkbox';
 
@@ -61,6 +61,8 @@ export class NileOption extends NileElement {
    */
   @property({ reflect: true }) value = '';
 
+  @property({ type: Boolean }) showCheckbox: boolean = false;
+
   /** Draws the option in a disabled state, preventing selection. */
   @property({ type: Boolean, reflect: true }) disabled = false;
 
@@ -84,6 +86,12 @@ export class NileOption extends NileElement {
     }
   }
 
+  protected updated(_changedProperties: PropertyValues): void {
+    if(_changedProperties.has('showCheckbox')) {
+      this.isMultipleSelect = this.showCheckbox;
+    }
+  }
+
   private handleDefaultSlotChange() {
     const textLabel = this.getTextLabel();
 

package/src/nile-pagination/index.ts

@@ -0,0 +1 @@
+export { NilePagination } from './nile-pagination';

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

@@ -0,0 +1,63 @@
+export function calculateTotalPages(
+  totalItems: number,
+  pageSize: number
+): number {
+  return Math.ceil(totalItems / pageSize);
+}
+
+export function getPaginationItems(
+  totalPages: number,
+  currentPage: number
+): (number | string)[] {
+  if (totalPages <= 7) {
+    return Array.from({ length: totalPages }, (_, i) => i + 1);
+  }
+
+  const pages: (number | string)[] = [1];
+  if (currentPage <= 4) {
+    pages.push(2, 3, 4, 5, '…');
+  } else if (currentPage >= totalPages - 3) {
+    pages.push(
+      '…',
+      totalPages - 4,
+      totalPages - 3,
+      totalPages - 2,
+      totalPages - 1
+    );
+  } else {
+    pages.push('…', currentPage - 1, currentPage, currentPage + 1, '…');
+  }
+  pages.push(totalPages);
+  return pages;
+}
+
+export function getHiddenPages(
+  totalPages: number,
+  items: (number | string)[],
+  currentPage: number,
+  position: 'left' | 'right'
+): number[] {
+  if (totalPages <= 7) return [];
+
+  const all = Array.from({ length: totalPages }, (_, i) => i + 1);
+  const visible = items.filter(x => typeof x === 'number') as number[];
+  const hidden = all.filter(p => !visible.includes(p));
+
+  if (position === 'left') {
+    const firstAfterEllipsis = visible[1] as number;
+    return hidden.filter(p => p < firstAfterEllipsis);
+  } else {
+    const lastBeforeEllipsis = visible[visible.length - 2] as number;
+    return hidden.filter(p => p > lastBeforeEllipsis);
+  }
+}
+
+export function getRangeText(
+  totalItems: number,
+  pageSize: number,
+  currentPage: number
+): string {
+  const start = (currentPage - 1) * pageSize + 1;
+  const end = Math.min(currentPage * pageSize, totalItems);
+  return `Showing ${start}–${end} of ${totalItems}`;
+}