@aquera/nile-elements 0.1.65-beta-1.0 → 0.1.65

package/dist/src/nile-lightdomeditor/nile-lightdomeditor.js

@@ -1,591 +0,0 @@
-var NileLightdomeditor_1;
-import { __decorate } from "tslib";
-import { LitElement, html } 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';
-let NileLightdomeditor = NileLightdomeditor_1 = class NileLightdomeditor extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.toolbar = '';
-        this.mentions = {};
-        // Mention-related state
-        this.mentionOpen = false;
-        this.mentionTrigger = null;
-        this.mentionQuery = '';
-        this.mentionSuggestions = [];
-        this.mentionFiltered = [];
-        this.mentionX = 0;
-        this.mentionY = 0;
-        this.previewHTML = '';
-        this.characterCount = 0;
-        this.wordCount = 0;
-        this.lastRange = null;
-    }
-    createRenderRoot() {
-        return this;
-    }
-    // Default toolbar layout matching the design
-    get parsedToolbar() {
-        if (this.toolbar) {
-            return this.toolbar.split(',').map(k => k.trim()).filter(k => Object.keys(this.constructor.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_1.TOOLBAR_CONFIG[key](this))}
-      </div>
-      <div
-  class="editor"
-  contenteditable="true"
-  @keydown="${(e) => this.onKeyDown(e)}"
-  @keyup="${(e) => 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>
-  `;
-    }
-    onKeyUp(e) {
-        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);
-        }
-    }
-    onKeyDown(e) {
-        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]);
-            }
-        }
-    }
-    openMention(trigger) {
-        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');
-        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;
-    }
-    closeMention() {
-        this.mentionOpen = false;
-        this.mentionTrigger = null;
-    }
-    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();
-        }
-    }
-    updateMentionFiltered() {
-        const q = this.mentionQuery.toLowerCase();
-        this.mentionFiltered = this.mentionSuggestions.filter(item => item.label.toLowerCase().startsWith(q));
-    }
-    selectMention(item) {
-        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;
-        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();
-    }
-    saveSelection() {
-        const sel = window.getSelection();
-        if (sel && sel.rangeCount)
-            this.lastRange = sel.getRangeAt(0).cloneRange();
-    }
-    restoreSelection() {
-        const sel = window.getSelection();
-        sel?.removeAllRanges();
-        if (this.lastRange)
-            sel?.addRange(this.lastRange);
-    }
-    format(tag) {
-        this.restoreSelection();
-        if (!this.lastRange)
-            return;
-        const el = document.createElement(tag);
-        el.appendChild(this.lastRange.extractContents());
-        this.lastRange.insertNode(el);
-        this.afterEdit(el);
-    }
-    formatHeadingFromDropdown(tag) {
-        if (!tag)
-            return;
-        this.restoreSelection();
-        if (!this.lastRange)
-            return;
-        let node = 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);
-    }
-    formatAlign(alignment) {
-        this.restoreSelection();
-        if (!this.lastRange)
-            return;
-        let node = 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);
-    }
-    formatList(type) {
-        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);
-    }
-    promptLink() {
-        const url = prompt('Enter URL:', 'https://');
-        if (url)
-            this.formatLink(url);
-    }
-    formatColor(color) {
-        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');
-        if (colorBar)
-            colorBar.style.backgroundColor = color;
-    }
-    formatBackgroundColor(color) {
-        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);
-    }
-    formatLink(href) {
-        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);
-    }
-    promptImage() { this.imageInput.value = ''; this.imageInput.click(); }
-    onImageSelected(e) {
-        const input = e.target;
-        if (input.files?.length) {
-            const reader = new FileReader();
-            reader.onload = () => this.formatImage(reader.result);
-            reader.readAsDataURL(input.files[0]);
-        }
-    }
-    formatImage(src) {
-        this.restoreSelection();
-        if (!this.lastRange)
-            return;
-        const img = document.createElement('img');
-        img.src = src;
-        img.alt = 'Image';
-        this.lastRange.insertNode(img);
-        this.afterEdit(img);
-    }
-    formatFontFamily(font) {
-        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);
-    }
-    formatFontSize(size) {
-        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);
-    }
-    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);
-    }
-    insertHorizontalRule() {
-        this.restoreSelection();
-        if (!this.lastRange)
-            return;
-        const hr = document.createElement('hr');
-        this.lastRange.insertNode(hr);
-        this.afterEdit(hr);
-    }
-    formatQuote() {
-        this.restoreSelection();
-        if (!this.lastRange)
-            return;
-        const blockquote = document.createElement('blockquote');
-        blockquote.appendChild(this.lastRange.extractContents());
-        this.lastRange.insertNode(blockquote);
-        this.afterEdit(blockquote);
-    }
-    formatCode() {
-        this.restoreSelection();
-        if (!this.lastRange)
-            return;
-        const code = document.createElement('code');
-        code.appendChild(this.lastRange.extractContents());
-        this.lastRange.insertNode(code);
-        this.afterEdit(code);
-    }
-    afterEdit(node) {
-        const range = document.createRange();
-        range.setStartAfter(node);
-        range.collapse(true);
-        const sel = window.getSelection();
-        sel?.removeAllRanges();
-        sel?.addRange(range);
-        this.saveSelection();
-        this.syncPreview();
-    }
-    updateCounts() {
-        const text = this.editor.textContent || '';
-        this.characterCount = text.length;
-        this.wordCount = text.trim() ? text.trim().split(/\s+/).length : 0;
-    }
-    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 }));
-    }
-};
-/**
- * Map of toolbar keys to render functions with icons
- * Each function receives the component instance to call instance methods
- */
-NileLightdomeditor.TOOLBAR_CONFIG = {
-    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) => self.formatFontFamily(e.target.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) => self.formatFontSize(e.target.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) => self.formatColor(e.target.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) => self.formatBackgroundColor(e.target.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) => self.formatHeadingFromDropdown(e.target.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>`,
-};
-__decorate([
-    property({ type: String })
-], NileLightdomeditor.prototype, "toolbar", void 0);
-__decorate([
-    property({
-        attribute: 'mentions',
-        converter: {
-            fromAttribute: (value) => {
-                try {
-                    const parsed = JSON.parse(value);
-                    const result = {};
-                    for (const trigger of Object.keys(parsed)) {
-                        const items = parsed[trigger];
-                        if (Array.isArray(items)) {
-                            result[trigger] = items
-                                .filter((i) => i && typeof i.key === 'string' && typeof i.label === 'string')
-                                .map((i) => ({ key: i.key, label: i.label }));
-                        }
-                    }
-                    return result;
-                }
-                catch {
-                    return {};
-                }
-            },
-            toAttribute: (value) => JSON.stringify(value)
-        }
-    })
-], NileLightdomeditor.prototype, "mentions", void 0);
-__decorate([
-    state()
-], NileLightdomeditor.prototype, "mentionOpen", void 0);
-__decorate([
-    state()
-], NileLightdomeditor.prototype, "mentionTrigger", void 0);
-__decorate([
-    state()
-], NileLightdomeditor.prototype, "mentionQuery", void 0);
-__decorate([
-    state()
-], NileLightdomeditor.prototype, "mentionSuggestions", void 0);
-__decorate([
-    state()
-], NileLightdomeditor.prototype, "mentionFiltered", void 0);
-__decorate([
-    state()
-], NileLightdomeditor.prototype, "mentionX", void 0);
-__decorate([
-    state()
-], NileLightdomeditor.prototype, "mentionY", void 0);
-__decorate([
-    query('.editor')
-], NileLightdomeditor.prototype, "editor", void 0);
-__decorate([
-    query('#imageInput')
-], NileLightdomeditor.prototype, "imageInput", void 0);
-__decorate([
-    state()
-], NileLightdomeditor.prototype, "previewHTML", void 0);
-__decorate([
-    state()
-], NileLightdomeditor.prototype, "characterCount", void 0);
-__decorate([
-    state()
-], NileLightdomeditor.prototype, "wordCount", void 0);
-NileLightdomeditor = NileLightdomeditor_1 = __decorate([
-    customElement('nile-lightdomeditor')
-], NileLightdomeditor);
-export { NileLightdomeditor };
-//# sourceMappingURL=nile-lightdomeditor.js.map