@aquera/nile-elements 1.6.2 → 1.6.4

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

@@ -327,11 +327,21 @@ export class NileRichTextEditor extends LitElement {
   }
 
   private onEditorClick = (e: MouseEvent) => {
+    if (this.disabled) { e.preventDefault(); return; }
     const anchor = (e.target as HTMLElement).closest?.('a');
     if (anchor) e.preventDefault();
   };
 
+  private onEditorPaste = (e: ClipboardEvent) => {
+    if (this.disabled) e.preventDefault();
+  };
+
+  private onEditorDrop = (e: DragEvent) => {
+    if (this.disabled) e.preventDefault();
+  };
+
   private onEditorInput = () => {
+    if (this.disabled) return;
     this.ensureAtLeastOneParagraph();
     this.scrubBrokenMentions();
     this.updateContent();
@@ -366,6 +376,8 @@ export class NileRichTextEditor extends LitElement {
     this.editorEl.addEventListener('mouseup', this.onEditorMouseup);
     this.editorEl.addEventListener('keyup', this.onEditorKeyup);
     this.editorEl.addEventListener('keydown', this.onEditorKeydown);
+    this.editorEl.addEventListener('paste', this.onEditorPaste);
+    this.editorEl.addEventListener('drop', this.onEditorDrop);
   }
 
   private unwireEditor() {
@@ -375,9 +387,15 @@ export class NileRichTextEditor extends LitElement {
     this.editorEl.removeEventListener('mouseup', this.onEditorMouseup);
     this.editorEl.removeEventListener('keyup', this.onEditorKeyup);
     this.editorEl.removeEventListener('keydown', this.onEditorKeydown);
+    this.editorEl.removeEventListener('paste', this.onEditorPaste);
+    this.editorEl.removeEventListener('drop', this.onEditorDrop);
   }
 
   private onEditorKeydown = (e: KeyboardEvent) => {
+    if (this.disabled) {
+      e.preventDefault();
+      return;
+    }
     if (this.singleLineEditor && e.key === 'Enter' && e.shiftKey) {
       e.preventDefault();
       return;
@@ -640,6 +658,17 @@ export class NileRichTextEditor extends LitElement {
       (el.textContent ?? '').replace(/\u200B/g, '').trim() === '';
     if (el.childNodes.length === 0 || onlyWhitespace) {
       el.innerHTML = '<p><br></p>';
+      const p = el.querySelector('p');
+      if (p) {
+        const range = document.createRange();
+        range.setStart(p, 0);
+        range.collapse(true);
+        const sel = window.getSelection();
+        if (sel) {
+          sel.removeAllRanges();
+          sel.addRange(range);
+        }
+      }
       return;
     }
 
@@ -663,6 +692,7 @@ export class NileRichTextEditor extends LitElement {
 
   // ---------- Toolbar/commands ----------
   private onToolbarCommand(cmd: string) {
+    if (this.disabled) return;
     this.focusAndRestore();
     switch (cmd) {
       case 'bold':
@@ -889,6 +919,13 @@ export class NileRichTextEditor extends LitElement {
     this.ensureAtLeastOneParagraph();
     const isEmpty = (this.editorEl.textContent ?? '').trim() === '';
     this.editorEl.classList.toggle('empty', isEmpty);
+
+    const sel = window.getSelection();
+    const caretRange =
+      sel && sel.rangeCount > 0 && this.editorEl.contains(sel.getRangeAt(0).startContainer)
+        ? sel.getRangeAt(0).cloneRange()
+        : null;
+
     const clone = this.editorEl.cloneNode(true) as HTMLElement;
   
     if (!this.noStyles) {
@@ -922,6 +959,12 @@ export class NileRichTextEditor extends LitElement {
         el.removeAttribute('style')
       );
     }
+
+    if (caretRange && sel && this.editorEl.contains(caretRange.startContainer)) {
+      sel.removeAllRanges();
+      sel.addRange(caretRange);
+    }
+
     this.content = clone.innerHTML;  
     if (this.previewEl) this.previewEl.innerHTML = this.content;
   

package/src/nile-rich-text-editor/nile-rte-link.test.ts

@@ -191,14 +191,14 @@ describe('NileRteLink', () => {
     expect(normalize('tel:+123')).to.equal('tel:+123');
   });
 
-  it('18. displayUrl strips protocol for display', async () => {
+  it('18. displayUrl returns URL as-is', async () => {
     editor = createEditor();
     const el = await fixture<NileRteLink>(
       html`<nile-rte-link .editorEl=${editor}></nile-rte-link>`
     );
     const display = (el as any).displayUrl.bind(el);
-    expect(display('https://example.com')).to.equal('example.com');
-    expect(display('http://example.com/path')).to.equal('example.com/path');
+    expect(display('https://example.com')).to.equal('https://example.com');
+    expect(display('http://example.com/path')).to.equal('http://example.com/path');
   });
 
   // ── Link Insertion (collapsed selection) ──
@@ -309,7 +309,7 @@ describe('NileRteLink', () => {
     expect((el as any).activeAnchor).to.equal(a);
   });
 
-  it('25. pre-fills input with existing link URL (protocol stripped)', async () => {
+  it('25. pre-fills input with existing link URL', async () => {
     editor = createEditor('<p><a href="https://example.com">link</a></p>');
     const el = await fixture<NileRteLink>(
       html`<nile-rte-link .editorEl=${editor}></nile-rte-link>`
@@ -320,7 +320,7 @@ describe('NileRteLink', () => {
     (el as any).onOpen();
     await elementUpdated(el);
 
-    expect((el as any).linkValue).to.equal('example.com');
+    expect((el as any).linkValue).to.equal(a.href);
   });
 
   it('26. updates existing anchor href on apply', async () => {
@@ -472,6 +472,7 @@ describe('NileRteLink', () => {
     (el as any).ignoreBlur = false;
     (el as any).isApplying = false;
     (el as any).onInputBlur();
+    await sleep(50);
 
     expect((el as any).selectionRange).to.be.null;
   });

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

@@ -3,8 +3,7 @@ export function toggleList(root: HTMLElement, kind: 'ul' | 'ol') {
   if (!sel || sel.rangeCount === 0) return;
   const range = sel.getRangeAt(0);
   function styleList(list: HTMLElement) {
-    list.style.paddingInlineStart = '0';
-    list.style.margin = '0';
+        list.style.margin = '0';
   }
 
   function isEmptyBlock(el: HTMLElement) {

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

@@ -253,7 +253,7 @@ export const styles = css`
 
   .select--standard:not(.select--disabled).select--open .select__combobox,
   .select--standard:not(.select--disabled).select--focused .select__combobox {
-    background-color: var(--nile-colors-neutral-100);
+    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));
   }
 
   .select--warning .select__combobox {
@@ -437,6 +437,25 @@ export const styles = css`
     margin-bottom: -8px;
   }
 
+  .select__pre-footer-area {
+    position: sticky;
+    bottom: 0;
+    z-index: 1;
+    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+  }
+
+  .select__custom-footer {
+    display: block;
+    border-top: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
+    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+    padding: var(--nile-spacing-lg, var(--ng-spacing-lg))  ;
+  }
+
+  .select__custom-footer:hover {
+     background: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary-hover));
+  }
+
+
   .select__footer {
     position: sticky;
     bottom: 0px;
@@ -520,7 +539,7 @@ export const styles = css`
   box-shadow: 0 0 0 1px  var(--ng-colors-border-brand) inset ;
 }
 
-:host([stickyHeader])  .select__footer{
+:host([stickyHeader]) .select__footer-area {
   z-index: 1;
 }
 

package/src/nile-select/nile-select.ts

@@ -69,6 +69,7 @@ type NileRemoveEvent = CustomEvent<Record<PropertyKey, never>>;
  * @slot clear-icon - An icon to use in lieu of the default clear icon.
  * @slot expand-icon - The icon to show when the control is expanded and collapsed. Rotates on open and close.
  * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
+ * @slot pre-footer - Content to display at the bottom of the dropdown listbox. Useful for action buttons like "Create New". In multi-select mode, appears above the "Show Selected" / "Clear All" bar.
  *
  * @event nile-change - Emitted when the control's value changes.
  * @event nile-clear - Emitted when the control's value is cleared.
@@ -101,6 +102,8 @@ type NileRemoveEvent = CustomEvent<Record<PropertyKey, never>>;
  * @csspart tag__remove-button__base - The tag's remove button base part.
  * @csspart clear-button - The clear button.
  * @csspart expand-icon - The container that wraps the expand icon.
+ * @csspart custom-footer - The container that wraps the custom footer slot content.
+ * @csspart footer-area - The sticky wrapper around the custom footer and the built-in multi-select footer.
  */
 
 @customElement('nile-select')
@@ -116,7 +119,8 @@ export class NileSelect extends NileElement implements NileFormControl{
   private readonly hasSlotController = new HasSlotController(
     this,
     'help-text',
-    'label'
+    'label',
+    'pre-footer'
   );
   private typeToSelectString = '';
   private typeToSelectTimeout: number;
@@ -522,6 +526,10 @@ export class NileSelect extends NileElement implements NileFormControl{
     event.preventDefault();
   }
 
+  private handlePreFooterClick(): void {
+    this.hide();
+  }
+
   /**
    * Toggles the display of selected options in the dropdown
    * @param event - the event object
@@ -1680,29 +1688,41 @@ export class NileSelect extends NileElement implements NileFormControl{
                 <slot></slot>
               </div>
 
-              ${this.multiple
-                ? html` <div
-                    part="footer"
-                    class="select__footer"
-                    @click="${this.handleFooterClick}"
-                  >
-                    <span
-                      @click="${this.toggleShowSelected}"
-                      style="cursor: pointer;"
-                    >
-                      <nile-checkbox
-                        ?disabled="${this.selectedOptions.length === 0}"
-                        ?checked="${this.showSelected}"
-                      >
-                        &nbsp; Show Selected</nile-checkbox
-                      >
-                    </span>
-                    ${this.selectedOptions.length !== 0
-                      ? html` <span
-                          class="select__clear"
-                          @click="${this.unSlectAll}"
-                          >Clear All</span
-                        >`
+              ${this.hasSlotController.test('pre-footer') || this.multiple
+                ? html`<div part="footer-area" class="select__pre-footer-area">
+                    ${this.hasSlotController.test('pre-footer')
+                      ? html`
+                      <div part="pre-footer" @click=${this.handlePreFooterClick}>  
+                        <slot
+                          name="pre-footer"
+                          class="select__custom-footer"
+                        ></slot> </div>`
+                      : ''}
+                    ${this.multiple
+                      ? html`<div
+                          part="footer"
+                          class="select__footer"
+                          @click="${this.handleFooterClick}"
+                        >
+                          <span
+                            @click="${this.toggleShowSelected}"
+                            style="cursor: pointer;"
+                          >
+                            <nile-checkbox
+                              ?disabled="${this.selectedOptions.length === 0}"
+                              ?checked="${this.showSelected}"
+                            >
+                              &nbsp; Show Selected</nile-checkbox
+                            >
+                          </span>
+                          ${this.selectedOptions.length !== 0
+                            ? html`<span
+                                class="select__clear"
+                                @click="${this.unSlectAll}"
+                                >Clear All</span
+                              >`
+                            : ``}
+                        </div>`
                       : ``}
                   </div>`
                 : ``}

package/src/nile-select/portal-utils.ts

@@ -248,10 +248,42 @@ export class PortalContentUtils {
   }
 
   static addFooterSection(listbox: HTMLElement, component: any): void {
-    if (!component.multiple) return;
+    const hasCustomFooter = component.querySelectorAll('[slot="pre-footer"]').length > 0;
+    const hasBuiltInFooter = component.multiple;
 
-    const footerDiv = this.createFooter(component);
-    listbox.appendChild(footerDiv);
+    if (!hasCustomFooter && !hasBuiltInFooter) return;
+
+    const footerArea = document.createElement('div');
+    footerArea.setAttribute('part', 'footer-area');
+    footerArea.className = 'select__footer-area';
+
+    if (hasCustomFooter) {
+      this.addCustomFooter(footerArea, component);
+    }
+
+    if (hasBuiltInFooter) {
+      const builtInFooter = this.createFooter(component);
+      footerArea.appendChild(builtInFooter);
+    }
+
+    listbox.appendChild(footerArea);
+  }
+
+  static addCustomFooter(container: HTMLElement, component: any): void {
+    const footerContent = Array.from(component.querySelectorAll('[slot="pre-footer"]'));
+    if (footerContent.length === 0) return;
+
+    const customFooter = document.createElement('div');
+    customFooter.className = 'select__custom-footer';
+    customFooter.setAttribute('part', 'custom-footer');
+
+    footerContent.forEach((el: Element) => {
+      customFooter.appendChild(el.cloneNode(true));
+    });
+
+    customFooter.addEventListener('click', () => component.hide());
+
+    container.appendChild(customFooter);
   }
 
   static createFooter(component: any): HTMLElement {
@@ -430,6 +462,17 @@ export class PortalEventUtils {
       this.setupShowSelectedToggle(footer, component);
       this.setupClearAllHandler(footer, component);
     }
+
+    this.setupCustomFooterListeners(clonedListbox, component);
+  }
+
+  static setupCustomFooterListeners(clonedListbox: HTMLElement, component: any): void {
+    const customFooter = clonedListbox.querySelector('.select__custom-footer') as HTMLElement;
+    if (!customFooter) return;
+
+    customFooter.addEventListener('click', (event) => {
+      event.stopPropagation();
+    });
   }
 
   static setupFooterClickHandlers(footer: HTMLElement): void {