@aquera/nile-elements 0.1.63 → 0.1.64-beta-1.1

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

@@ -0,0 +1,179 @@
+// src/nile-rich-text-editor/utils.ts
+export function closestBlock(node: Node | null, root: HTMLElement): HTMLElement | null {
+    while (node && node !== root) {
+      if (node instanceof HTMLElement) {
+        const display = getComputedStyle(node).display;
+        if (node.tagName.match(/^(P|DIV|H1|H2|H3|H4|H5|H6|LI)$/) || display === 'block' || display === 'list-item') {
+          return node;
+        }
+      }
+      node = node?.parentNode || null;
+    }
+    return root;
+  }
+  
+  export function nearestElement(n: Node | null): HTMLElement | null {
+    while (n && !(n instanceof HTMLElement)) n = n.parentNode as Node | null;
+    return n as HTMLElement | null;
+  }
+  
+  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 unwrap(node: HTMLElement) {
+    const p = node.parentNode; if (!p) return;
+    while (node.firstChild) p.insertBefore(node.firstChild, node);
+    p.removeChild(node);
+  }
+  
+  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 toggleInlineTag(root: HTMLElement, tag: 'strong'|'em'|'u'|'span', attrs?: Record<string,string>) {
+    const sel = document.getSelection();
+    if (!sel || sel.rangeCount === 0) return;
+    const range = sel.getRangeAt(0);
+  
+    if (range.collapsed) {
+      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);
+      const r = document.createRange();
+      r.setStart(elm.firstChild!, 1);
+      r.collapse(true);
+      sel.removeAllRanges(); sel.addRange(r);
+      return;
+    }
+  
+    let n: Node | null = range.startContainer;
+    let target: HTMLElement | null = null;
+    while (n && n !== root) {
+      if (n instanceof HTMLElement && n.tagName.toLowerCase() === tag) { target = n; break; }
+      n = n.parentNode;
+    }
+    if (target) unwrap(target); else surroundInline(range, tag, attrs);
+  }
+  
+  export function setBlockTag(root: HTMLElement, tag: 'p'|'h1'|'h2'|'h3') {
+    const sel = document.getSelection(); if (!sel || sel.rangeCount === 0) return;
+    const range = sel.getRangeAt(0);
+    const block = closestBlock(range.startContainer, root); if (!block) return;
+    if (block.tagName.toLowerCase() === tag) return;
+    const nb = document.createElement(tag);
+    while (block.firstChild) nb.appendChild(block.firstChild);
+    block.replaceWith(nb);
+    const r = document.createRange(); r.selectNodeContents(nb); r.collapse(true);
+    sel.removeAllRanges(); sel.addRange(r);
+  }
+  
+  export function setAlignment(root: HTMLElement, align: 'left'|'center'|'right'|'justify') {
+    const sel = document.getSelection(); if (!sel || sel.rangeCount === 0) return;
+    const range = sel.getRangeAt(0);
+    const block = closestBlock(range.startContainer, root); if (!block) return;
+    block.style.textAlign = align === 'justify' ? 'justify' : align;
+  }
+  
+  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}` });
+  }
+  
+  export function setForeColor(root: HTMLElement, color: 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.color = color;
+      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: `color:${color}` });
+  }
+  
+  export function toggleList(root: HTMLElement, kind: 'ul'|'ol') {
+    const sel = document.getSelection(); if (!sel || sel.rangeCount === 0) return;
+    const range = sel.getRangeAt(0);
+    const block = closestBlock(range.startContainer, root); if (!block) return;
+  
+    let li = block.closest('li');
+    if (li) {
+      const list = li.closest('ul,ol') as HTMLElement | null;
+      if (!list) return;
+      if (list.tagName.toLowerCase() === kind) {
+        const parent = list.parentElement!;
+        const frag = document.createDocumentFragment();
+        for (const child of Array.from(list.children)) {
+          if (child.tagName.toLowerCase() === 'li') {
+            const p = document.createElement('p');
+            while (child.firstChild) p.appendChild(child.firstChild);
+            frag.appendChild(p);
+          }
+        }
+        parent.replaceChild(frag, list);
+      } else {
+        const newList = document.createElement(kind);
+        while (list.firstChild) newList.appendChild(list.firstChild);
+        list.replaceWith(newList);
+      }
+      return;
+    }
+  
+    const list = document.createElement(kind);
+    const item = document.createElement('li'); list.appendChild(item);
+    while (block.firstChild) item.appendChild(block.firstChild);
+    block.replaceWith(list);
+  }
+  
+  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-richcodeeditor/index.ts

@@ -0,0 +1 @@
+export { NileRichcodeeditor } from './nile-richcodeeditor';

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

@@ -0,0 +1,19 @@
+/**
+* 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';
+
+/**
+ * Richcodeeditor CSS
+ */
+export const styles = css`
+	:host {
+
+	}
+`;
+
+export default [styles];

package/src/nile-richcodeeditor/nile-richcodeeditor.ts

@@ -0,0 +1,192 @@
+import { LitElement, html, css, CSSResultGroup } from 'lit';
+import { customElement, state, query } from 'lit/decorators.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+
+/**
+ * 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.
+ */
+@customElement('nile-richcodeeditor')
+export class NileRichcodeeditor extends LitElement {
+  /**
+   * Component styles
+   */
+  static styles: CSSResultGroup = css`
+    :host {
+      display: block;
+      font-family: Arial, sans-serif;
+    }
+    .toolbar {
+      display: flex;
+      gap: 8px;
+      margin-bottom: 12px;
+    }
+    .toolbar button {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 4px;
+      width: 32px;
+      height: 32px;
+      cursor: pointer;
+      background: var(--toolbar-bg, #f0f0f0);
+      border: 1px solid #ccc;
+      border-radius: 3px;
+    }
+    .toolbar button:hover {
+      background: var(--toolbar-hover-bg, #e0e0e0);
+    }
+    .toolbar svg {
+      width: 16px;
+      height: 16px;
+      fill: currentColor;
+    }
+    .editor {
+      min-height: 200px;
+      border: 1px solid #ccc;
+      padding: 8px;
+      border-radius: 4px;
+      outline: none;
+    }
+    .editor img {
+      max-width: 100%;
+      height: auto;
+    }
+    .preview {
+      margin-top: 16px;
+      padding: 8px;
+      border: 1px solid #eee;
+      border-radius: 4px;
+      background: #fafafa;
+    }
+    input[type="file"] {
+      display: none;
+    }
+  `;
+
+  @query('.editor') private editor!: HTMLElement;
+  @query('.image-input') private fileInput!: HTMLInputElement;
+  @state() private content = '';
+  @state() private currentAlign: 'left' | 'center' | 'right' | '' = '';
+
+  firstUpdated() {
+    this.editor.addEventListener('input', () => this.updateContent());
+    this.fileInput.addEventListener('change', e => this.handleImageUpload(e));
+  }
+
+  private applyHeading(level: number) {
+    const parent = this.editor.parentNode;
+    if (!parent) return;
+    this.revertToNormal();
+    const wrapper = document.createElement(`h${level}`);
+    parent.insertBefore(wrapper, this.editor);
+    wrapper.appendChild(this.editor);
+    this.updateContent();
+  }
+
+  private applyList() {
+    const parent = this.editor.parentNode;
+    if (!parent) return;
+    this.revertToNormal();
+    const ul = document.createElement('ul');
+    const li = document.createElement('li');
+    parent.insertBefore(ul, this.editor);
+    ul.appendChild(li);
+    li.appendChild(this.editor);
+    this.updateContent();
+  }
+
+  private triggerImageUpload() {
+    this.fileInput.click();
+  }
+
+  private handleImageUpload(event: Event) {
+    const input = event.target as HTMLInputElement;
+    const file = input.files?.[0];
+    if (file?.type.startsWith('image/')) {
+      const reader = new FileReader();
+      reader.onload = () => {
+        const img = document.createElement('img');
+        img.src = reader.result as string;
+        img.alt = file.name;
+        const sel = window.getSelection();
+        if (sel?.rangeCount) {
+          const range = sel.getRangeAt(0);
+          range.deleteContents();
+          range.insertNode(img);
+          range.setStartAfter(img);
+          range.collapse(true);
+          sel.removeAllRanges();
+          sel.addRange(range);
+        } else {
+          this.editor.appendChild(img);
+        }
+        this.updateContent();
+      };
+      reader.readAsDataURL(file);
+    }
+    input.value = '';
+  }
+
+  private applyAlign(alignment: 'left' | 'center' | 'right') {
+    this.currentAlign = alignment;
+    this.editor.style.textAlign = alignment;
+    this.updateContent();
+  }
+
+  private revertToNormal() {
+    const parent = this.editor.parentNode as HTMLElement;
+    if (!parent) return;
+    const tag = parent.nodeName;
+    if (!['H1', 'H2', 'H3', 'UL'].includes(tag)) return;
+    const grand = parent.parentNode;
+    if (!grand) return;
+    grand.insertBefore(this.editor, parent);
+    grand.removeChild(parent);
+    this.updateContent();
+  }
+
+  private updateContent() {
+    const raw = this.editor.innerHTML;
+    const parent = this.editor.parentNode as HTMLElement;
+    let htmlContent = '';
+    if (['H1', 'H2', 'H3'].includes(parent.nodeName)) {
+      const tag = parent.nodeName.toLowerCase();
+      const style = this.currentAlign ? ` style=\"text-align:${this.currentAlign}\"` : '';
+      htmlContent = `<${tag}${style}>${raw}</${tag}>`;
+    } else if (parent.nodeName === 'UL') {
+      const wrapStart = this.currentAlign ? `<div style=\"text-align:${this.currentAlign}\">` : '';
+      const wrapEnd = this.currentAlign ? '</div>' : '';
+      htmlContent = `${wrapStart}<ul><li>${raw}</li></ul>${wrapEnd}`;
+    } else {
+      htmlContent = this.currentAlign
+        ? `<div style=\"text-align:${this.currentAlign}\">${raw}</div>`
+        : raw;
+    }
+    this.content = htmlContent;
+  }
+
+  render() {
+    return html`
+      <div class="toolbar">
+        <button title="H1" @mousedown=${(e: MouseEvent) => e.preventDefault()} @click=${() => this.applyHeading(1)}>H1</button>
+        <button title="H2" @click=${() => this.applyHeading(2)}>H2</button>
+        <button title="H3" @click=${() => this.applyHeading(3)}>H3</button>
+        <button title="Align Left" @click=${() => this.applyAlign('left')}><svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="2"/><rect x="3" y="9" width="12" height="2"/><rect x="3" y="14" width="18" height="2"/><rect x="3" y="19" width="12" height="2"/></svg></button>
+        <button title="Align Center" @click=${() => this.applyAlign('center')}><svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="2"/><rect x="6" y="9" width="12" height="2"/><rect x="3" y="14" width="18" height="2"/><rect x="6" y="19" width="12" height="2"/></svg></button>
+        <button title="Align Right" @click=${() => this.applyAlign('right')}><svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="2"/><rect x="9" y="9" width="12" height="2"/><rect x="3" y="14" width="18" height="2"/><rect x="9" y="19" width="12" height="2"/></svg></button>
+        <button title="Image" @click=${() => this.triggerImageUpload()}><svg viewBox="0 0 24 24"><path d="M21 19V5a2 2 0 0 0-2-2H5c-1.1 0-2 .9-2 2v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3 3.5-4.5 4.5 6H6l2.5-4.5z"/></svg></button>
+        <button title="Normal" @click=${() => this.revertToNormal()}><svg viewBox="0 0 24 24"><text x="4" y="18" font-size="18">T</text></svg></button>
+      </div>
+      <input class="image-input" type="file" accept="image/*" />
+      <div class="editor" contenteditable="true"></div>
+      <div class="preview">${unsafeHTML(this.content)}</div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap { 'nile-richcodeeditor': NileRichcodeeditor; }
+}

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

@@ -33,11 +33,8 @@ import type { CSSResultGroup, PropertyValues } from 'lit';
 import type { NileFormControl } from '../internal/nile-element';
 import type NileOption from '../nile-option/nile-option';
 import type NilePopup from '../nile-popup/nile-popup';
-import type { RenderItemConfig } from '../nile-virtual-select/types.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import '../nile-virtual-select/nile-virtual-select';
-import { VirtualScrollHelper } from './virtual-scroll-helper';
 
 type NileRemoveEvent = CustomEvent<Record<PropertyKey, never>>;
 
@@ -56,7 +53,6 @@ type NileRemoveEvent = CustomEvent<Record<PropertyKey, never>>;
  * @dependency nile-icon
  * @dependency nile-popup
  * @dependency nile-tag
- * @dependency nile-virtual-select
  *
  * @slot - The listbox options. Must be `<nile-option>` elements. You can use `<nile-divider>` to group items visually.
  * @slot label - The input's label. Alternatively, you can use the `label` attribute.
@@ -95,15 +91,14 @@ type NileRemoveEvent = CustomEvent<Record<PropertyKey, never>>;
  */
 
 @customElement('nile-select')
-export class NileSelect extends NileElement implements NileFormControl{
+export class NileSelect extends NileElement implements NileFormControl {
   static styles: CSSResultGroup = styles;
 
   // protected override BUBBLES=false;
 
-  private formControlController: FormControlController | null;
-  private virtualScrollHelper!: VirtualScrollHelper;
-
-
+  private readonly formControlController = new FormControlController(this, {
+    assumeInteractionOn: ['nile-blur', 'nile-input'],
+  });
   private readonly hasSlotController = new HasSlotController(
     this,
     'help-text',
@@ -164,21 +159,7 @@ export class NileSelect extends NileElement implements NileFormControl{
   @property({ type: Boolean, reflect: true }) noWidthSync = false;
 
   /** Allows more than one option to be selected. */
-  @property({
-    reflect: true,
-    converter: {
-      fromAttribute(value) {
-        if (value === '' || value === 'true') return true;
-        if (value === 'false') return false;
-        return value;
-      },
-      toAttribute(value) {
-        return typeof value === 'boolean' ? String(value) : value;
-      }
-    }
-  })
-  multiple = false as boolean | string;
-  
+  @property({ type: Boolean, reflect: true }) multiple = false;
 
   @property({ attribute: 'help-text', reflect: true }) helpText = '';
 
@@ -251,13 +232,6 @@ export class NileSelect extends NileElement implements NileFormControl{
 
   @property({ type: String }) noResultsMessage: string = 'No results found';
 
-  /** Enhanced configuration for rendering items with support for display text, value, and search text */
-  @property({ attribute: false }) renderItemConfig?: RenderItemConfig;
-
-  @property({ type: Array }) data: any = [];
-
-  @property({ type: Boolean }) enableVirtualScroll = false;
-
   /** Gets the validity state object */
   get validity() {
     return this.valueInput?.validity;
@@ -268,18 +242,8 @@ export class NileSelect extends NileElement implements NileFormControl{
     return this.valueInput?.validationMessage;
   }
 
-  constructor() {
-    super();
-  }
-
   connectedCallback() {
     super.connectedCallback();
-    if(!this.enableVirtualScroll) {
-      this.formControlController = new FormControlController(this, {
-          assumeInteractionOn: ['nile-blur', 'nile-input'],
-      });
-    }
-    this.virtualScrollHelper = new VirtualScrollHelper(this);
     this.handleDocumentFocusIn = this.handleDocumentFocusIn.bind(this);
     this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);
     this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);
@@ -294,25 +258,15 @@ export class NileSelect extends NileElement implements NileFormControl{
     this.emit('nile-destroy');
   }
 
-  private options: NileOption[] = [];
-
   protected updated(_changedProperties: PropertyValues): void {
     if(_changedProperties.has('multiple')) {
-      this.setCheckBoxInOption(this.multiple as boolean);
-    }
-  }
-
-  protected firstUpdated(_changedProperties: PropertyValues): void {
-    if(_changedProperties.has('multiple')) {
-      this.setCheckBoxInOption(this.multiple as boolean);
+      this.setCheckBoxInOption(this.multiple);
     }
   }
 
   setCheckBoxInOption(checked: boolean): void {
-    if(!this.options.length) { 
-      this.options = this.getAllOptions();
-    }    
-    this.options.forEach((option: NileOption) => {
+    const options = this.getAllOptions();
+    options.forEach((option: NileOption) => {
       option.showCheckbox = checked;
     })
   }
@@ -538,8 +492,6 @@ export class NileSelect extends NileElement implements NileFormControl{
 
     if (this.value !== '') {
       this.setSelectedOptions([]);
-      this.showSelected = false;
-      this.value = '';
       this.displayInput.focus({ preventScroll: true });
 
       // Emit after update
@@ -795,7 +747,7 @@ export class NileSelect extends NileElement implements NileFormControl{
 
     // Update validity
     this.updateComplete.then(() => {
-      this.formControlController?.updateValidity();
+      this.formControlController.updateValidity();
     });
 
     this.calculateTotalWidthOfTags();
@@ -846,8 +798,8 @@ export class NileSelect extends NileElement implements NileFormControl{
   }
 
   private handleInvalid(event: Event) {
-    this.formControlController?.setValidity(false);
-    this.formControlController?.emitInvalidEvent(event);
+    this.formControlController.setValidity(false);
+    this.formControlController.emitInvalidEvent(event);
   }
 
   @watch('disabled', { waitUntilFirstUpdate: true })
@@ -950,7 +902,7 @@ export class NileSelect extends NileElement implements NileFormControl{
 
   /** Gets the associated form, if one exists. */
   getForm(): HTMLFormElement | null {
-    return this.formControlController?.getForm() || null;
+    return this.formControlController.getForm();
   }
 
   /** Checks for validity and shows the browser's validation message if the control is invalid. */
@@ -961,7 +913,7 @@ export class NileSelect extends NileElement implements NileFormControl{
   /** Sets a custom validation message. Pass an empty string to restore validity. */
   setCustomValidity(message: string) {
     this.valueInput.setCustomValidity(message);
-    this.formControlController?.updateValidity();
+    this.formControlController.updateValidity();
   }
 
   /** Sets focus on the control. */
@@ -1034,10 +986,6 @@ export class NileSelect extends NileElement implements NileFormControl{
   }
 
   render() {
-    if(this.enableVirtualScroll) {
-      return this.virtualScrollHelper.renderVirtualizedContent();
-    }
-
     const hasLabelSlot = this.hasSlotController.test('label');
     const hasHelpTextSlot = this.hasSlotController.test('help-text');
     const hasLabelSuffixSlot = this.hasSlotController.test('label-suffix');

package/src/nile-table-body/nile-table-body.css.ts

@@ -6,7 +6,6 @@
  */
 
 import { css } from 'lit';
-import { tableLayoutStyles } from '../internal/resizable-table-styles';
 
 /**
  * TableBody CSS
@@ -49,8 +48,6 @@ export const styles = css`
   slot::slotted(nile-table-row:last-child) {
     border-bottom: 0px;
   }
-
-  ${tableLayoutStyles}
 `;
 
 export default [styles];

package/src/nile-table-body/nile-table-body.ts

@@ -24,7 +24,6 @@ import {
 import { styles } from './nile-table-body.css';
 import NileElement from '../internal/nile-element';
 import { getInnerHTML } from '../slot';
-import { hasResizableColumns } from '../internal/resizable-table-helper';
 
 /**
  * nile-table-body component.
@@ -47,7 +46,6 @@ export class NileTableBody extends NileElement {
   @state() private header_rows_data: any[] = [];
   @state() private sort__index: number;
   @state() private search__index: number;
-  @state() private hasResizableColumns = false;
 
   public static get styles(): CSSResultArray {
     return [styles];
@@ -69,10 +67,6 @@ export class NileTableBody extends NileElement {
     return this.header_rows_data.indexOf(index__value);
   }
 
-  private checkForResizableColumns() {
-    this.hasResizableColumns = hasResizableColumns(this);
-  }
-
   handleSlotchange(e: any) {
     let row_data: any = [];
     this._childNodes.forEach((child: any) => {
@@ -94,8 +88,6 @@ export class NileTableBody extends NileElement {
         row_data = [];
       }
     });
-    
-    this.checkForResizableColumns();
   }
 
   private handleSort(e: any) {
@@ -123,7 +115,6 @@ export class NileTableBody extends NileElement {
           @slotchange=${this.handleSlotchange}
           @nile-click-sort=${this.handleSort}
           class="nile__table__body"
-          ?resizable=${this.hasResizableColumns}
           @nile-search=${this.handleSearch}
         ></slot>
       </div>

package/src/nile-table-cell-item/nile-table-cell-item.css.ts

@@ -6,7 +6,6 @@
  */
 
 import { css } from 'lit';
-import { resizableHostStyles, resizerStyles, resizableSlotStyles } from '../internal/resizable-table-styles';
 
 /**
  * TableCellItem CSS
@@ -20,20 +19,11 @@ export const styles = css`
     box-sizing: border-box;
     display: table-cell;
     vertical-align: middle;
+    max-width: var(--max--cell-width);
     padding: 16px 24px;
-    max-width: var(--max--cell-width);  
     min-height: var(--min--height);
   }
 
-  .cell__wrapper {
-    height: 100%;
-    position: relative;
-    display: flex;
-    align-items: center;
-    overflow: hidden;
-    width: 100%;
-  }
-
   .column {
     min-width:var(--min-cell-width);
     width:var(--cell-width);
@@ -47,10 +37,6 @@ export const styles = css`
     line-height: normal;
     letter-spacing: 0.2px;
   }
-
-  ${resizableHostStyles}
-  ${resizerStyles}
-  ${resizableSlotStyles}
 `;
 
 export default [styles];