@aquera/nile-elements 0.1.66-beta-1.1 → 0.1.66

package/src/nile-file-upload/utils/file-validation.util.ts

@@ -0,0 +1,216 @@
+import { DragHandler } from "./drag-drop.util";
+import { FileUploadState, FileUploadError, FileUploadEvent } from "../types";
+import { NileFileUpload } from "../nile-file-upload";
+import { RemoveFileDetail } from "../../nile-file-preview/types";
+
+export const setUpDragHandler = (
+  nileFileUpload: NileFileUpload,
+  dragHandler: DragHandler,
+): void => {
+  dragHandler.onStateChange((newState: FileUploadState) => {
+    nileFileUpload.state = newState;
+  });
+
+  dragHandler.onFileDrop((files: File[]) => {
+    const maxSize = parseSize(nileFileUpload.size);
+    const uploadedFiles = nileFileUpload.uploadedFiles;
+  
+    if (!nileFileUpload.allowMultiple && (uploadedFiles.length + files.length > 1)) {
+      nileFileUpload.errorMessage = FileUploadError.MULTIPLE_NOT_ALLOWED;
+      console.error(nileFileUpload.errorMessage);
+      nileFileUpload.requestUpdate();
+      return;
+    }
+  
+    let sizeExceeded = false;
+    let duplicatesFound = false;
+    const newFiles: File[] = [];
+    const rejectedFiles: File[] = [];
+  
+    for (const file of files) {
+      if (file.size > maxSize) {
+        sizeExceeded = true;
+        rejectedFiles.push(file);
+        continue;
+      }
+  
+      if (
+        !nileFileUpload.allowDuplicates &&
+        uploadedFiles.some(
+          (uploaded) =>
+            uploaded.name === file.name &&
+            uploaded.size === file.size &&
+            uploaded.type === file.type
+        )
+      ) {
+        duplicatesFound = true;
+        rejectedFiles.push(file);
+        continue;
+      }
+  
+      if(!rejectedFiles.includes(file)) {
+        newFiles.push(file);
+      }
+    }
+
+    if (sizeExceeded) {
+      nileFileUpload.errorMessage = FileUploadError.SIZE_LIMIT_EXCEEDED;
+      console.error(nileFileUpload.errorMessage);
+      nileFileUpload.requestUpdate();
+      nileFileUpload.dispatchEvent(new CustomEvent(FileUploadEvent.NILE_SIZE_EXCEED_FILES, {
+        detail: { files: rejectedFiles }
+      }));
+    }
+  
+    if (duplicatesFound && newFiles.length === 0) {
+      nileFileUpload.errorMessage = FileUploadError.DUPLICATES_NOT_ALLOWED;
+      console.error(nileFileUpload.errorMessage);
+      nileFileUpload.requestUpdate();
+    }
+  
+    nileFileUpload.uploadedFiles = [...uploadedFiles, ...newFiles];
+    nileFileUpload.requestUpdate();
+  });
+  
+
+  dragHandler.setErrorMessage((errorMessage: string) => {
+    console.error(nileFileUpload.errorMessage);
+    nileFileUpload.errorMessage = errorMessage;
+  });
+};
+
+export const addGlobalListeners = (dragHandler: DragHandler): void => {
+  document.addEventListener('dragover', dragHandler.preventDragOver, { passive: false });
+  document.addEventListener('drop', dragHandler.preventDrop, { passive: false });
+}
+
+export const addInternalListeners = (nileFileUpload: NileFileUpload, dragHandler: DragHandler, uploadRequests: any): void => {
+  nileFileUpload.addEventListener('mouseenter', (e) => handleHoverIn(nileFileUpload.setState, nileFileUpload.state));
+  nileFileUpload.addEventListener('mouseleave', (e) => handleHoverOut(nileFileUpload.setState, nileFileUpload.state));
+  nileFileUpload.addEventListener('dragenter', (e) => dragHandler.dragEnter(e));
+  nileFileUpload.addEventListener('dragleave', (e) => dragHandler.dragLeave(e));
+  nileFileUpload.addEventListener('dragover', (e) => dragHandler.dragOver(e));
+  nileFileUpload.addEventListener('drop', (e) => dragHandler.drop(e));  
+
+  cancelFileUpload(nileFileUpload, uploadRequests);
+  removeFile(nileFileUpload.uploadedFiles, nileFileUpload);
+}
+
+export function handleHoverIn(
+  setState: (state: FileUploadState) => void,
+  currentState: FileUploadState
+): void {
+  if (currentState === FileUploadState.DEFAULT) {
+    setState(FileUploadState.HOVER);
+  }
+}
+
+export function handleHoverOut(
+  setState: (state: FileUploadState) => void,
+  currentState: FileUploadState
+): void {
+  if (currentState === FileUploadState.HOVER) {
+    setState(FileUploadState.DEFAULT);
+  }
+}
+
+export function uploadFiles(nileFileUpload: NileFileUpload) {
+  const { uploadedFiles, fileUploadUrl, uploadRequests } = nileFileUpload;
+  if (!fileUploadUrl || !uploadedFiles?.length) return;
+
+  for (const file of uploadedFiles) {
+    if (uploadRequests.has(file)) continue;
+    
+    const formData = new FormData();
+    formData.append('file', file);
+
+    const xhr = new XMLHttpRequest();
+    uploadRequests.set(file, xhr);
+
+    nileFileUpload.emit(FileUploadEvent.NILE_UPLOADING);
+
+    xhr.upload.onprogress = (e) => {
+      const percent = Math.floor((e.loaded / e.total) * 100);
+      
+      nileFileUpload.dispatchEvent(new CustomEvent(FileUploadEvent.NILE_UPLOAD_PROGRESS, {
+        detail: { file, progress: percent }
+      }));
+    };
+
+    xhr.onload = () => {
+      if (xhr.status >= 200 && xhr.status < 300) {
+        nileFileUpload.dispatchEvent(new CustomEvent(FileUploadEvent.NILE_UPLOAD_SUCCESS, {
+          detail: { file, response: xhr.response }
+        }));
+      } else {
+        nileFileUpload.errorMessage = FileUploadError.SERVER_SIDE_ERROR;
+        nileFileUpload.requestUpdate();
+        nileFileUpload.dispatchEvent(new CustomEvent(FileUploadEvent.SERVER_SIDE_ERROR, {
+          detail: { file, status: xhr.status, response: xhr.response }
+        }));
+      }
+    };
+
+    xhr.onerror = () => {
+      uploadRequests.delete(file);
+      nileFileUpload.errorMessage = FileUploadError.NETWORK_ERROR;
+      nileFileUpload.dispatchEvent(new CustomEvent(FileUploadEvent.NILE_NETWORK_ERROR, {
+        detail: { file, status: xhr.status, response: xhr.response },
+        bubbles: true,
+        composed: true,
+      }));
+    };
+
+    xhr.open('POST', fileUploadUrl);
+    xhr.send(formData);
+  }
+}
+
+export const cancelFileUpload = (nileFileUpload: NileFileUpload, uploadRequests: Map<File, XMLHttpRequest>) => {
+  document.addEventListener(FileUploadEvent.NILE_CANCEL_UPLOAD, (e: CustomEvent) => {
+    const fileToCancel = e.detail.file;
+    const xhr = uploadRequests.get(fileToCancel);
+
+    if (xhr) {
+      xhr.abort();
+    }
+    uploadRequests.delete(fileToCancel);
+    nileFileUpload.uploadedFiles = nileFileUpload.uploadedFiles.filter(file => file !== fileToCancel);
+
+    nileFileUpload.dispatchEvent(new CustomEvent(FileUploadEvent.NILE_UPLOAD_CANCELLED, {
+      detail: { file: fileToCancel }
+    }));
+  });
+};
+
+function parseSize(sizeStr: string): number {
+  const units = { B: 1, KB: 1024, MB: 1024 ** 2, GB: 1024 ** 3 };
+  const num = parseFloat(sizeStr);
+  const unit = sizeStr.replace(/[0-9.\s]/g, '').toUpperCase();
+  const multiplier = units[unit as keyof typeof units] || 1;
+  return num * multiplier;
+}
+
+export const preventDefaultAndStopPropagation = (event: Event | DragEvent): void => {
+  event.preventDefault?.();
+  event.stopPropagation();
+}
+
+export const removeFile = (uploadedFiles: File[], nileFileUpload: NileFileUpload) => {
+  document.addEventListener('nile-remove', (e: CustomEvent<RemoveFileDetail>) => {
+    const { value } = e.detail;
+    uploadedFiles = uploadedFiles.filter(file => file !== value);
+    nileFileUpload.uploadedFiles = uploadedFiles;
+    nileFileUpload.requestUpdate();
+  });
+}
+
+export const truncateString = (nileFileUpload: NileFileUpload): void => {
+  if(nileFileUpload.variant === 'vertical' && nileFileUpload.errorMessage.length > 34) {
+    nileFileUpload.isStringTruncated = true;
+    nileFileUpload.requestUpdate();
+  } else if(nileFileUpload.variant === 'horizontal' && nileFileUpload.errorMessage.length > 96) {
+    nileFileUpload.isStringTruncated = true;
+    nileFileUpload.requestUpdate();
+  }
+}

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

@@ -49,7 +49,6 @@ export class NileOption extends NileElement {
   @query('.option__label') defaultSlot: HTMLSlotElement;
 
   @state() current = false; // the user has keyed into the option, but hasn't selected it yet (shows a highlight)
-  @state() selected = false; // the option is selected and has aria-selected="true"
   @state() hasHover = false; // we need this because Safari doesn't honor :hover styles while dragging
   @state() hidden = false; // the option is hidden
   @state() isMultipleSelect = false;
@@ -66,30 +65,38 @@ export class NileOption extends NileElement {
   /** Draws the option in a disabled state, preventing selection. */
   @property({ type: Boolean, reflect: true }) disabled = false;
 
+  /** Indicates whether the option is selected. */
+  @property({ type: Boolean, reflect: true }) selected = false;
+
   connectedCallback() {
     super.connectedCallback();
     this.setAttribute('role', 'option');
     this.setAttribute('aria-selected', 'false');
 
+    // Find the closest parent 'nile-select' or 'nile-virtual-select' element
+    const parentSelect = this.closest('nile-select') || this.closest('nile-virtual-select');
+    this.checkIfMultipleSelect();
+  }
+
+  checkIfMultipleSelect() {
     // Find the closest parent 'nile-select' element
-    const parentSelect = this.closest('nile-select');
+    const parentSelect = this.closest('nile-select') || this.closest('nile-virtual-select');
 
     // Check if the parent has the 'multiple' attribute
     if (parentSelect && parentSelect.hasAttribute('multiple')) {
-      let multipleValue = parentSelect.getAttribute('multiple');
-      if (multipleValue !== 'false') {
-        if(multipleValue === ''){
-          multipleValue = 'true';
-        }
-        this.isMultipleSelect = Boolean(multipleValue);
+      // let multipleValue = parentSelect.getAttribute('multiple');
+      if(parentSelect.hasAttribute('multiple') && parentSelect.getAttribute('multiple') === '') {
+        this.isMultipleSelect = true;
+      } else if (parentSelect.getAttribute('multiple') === 'true') {
+        this.isMultipleSelect = true;
+      } else {
+        this.isMultipleSelect = false;
       }
     }
   }
 
   protected updated(_changedProperties: PropertyValues): void {
-    if(_changedProperties.has('showCheckbox')) {
-      this.isMultipleSelect = this.showCheckbox;
-    }
+    this.checkIfMultipleSelect();
   }
 
   private handleDefaultSlotChange() {
@@ -174,7 +181,7 @@ export class NileOption extends NileElement {
             @mouseleave=${this.handleMouseLeave}
           >
 
-          ${this.isMultipleSelect ? html`<nile-checkbox class="option--checkbox" .checked=${this.selected}></nile-checkbox>` : ''}
+          ${this.isMultipleSelect ? html`<nile-checkbox part="checkbox" class="option--checkbox" .checked=${this.selected}></nile-checkbox>` : ''}
 
             <slot part="prefix" name="prefix" class="option__prefix"></slot>
             <slot

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

@@ -33,8 +33,11 @@ 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>>;
 
@@ -53,6 +56,7 @@ 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.
@@ -91,14 +95,15 @@ 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 readonly formControlController = new FormControlController(this, {
-    assumeInteractionOn: ['nile-blur', 'nile-input'],
-  });
+  private formControlController: FormControlController | null;
+  private virtualScrollHelper!: VirtualScrollHelper;
+
+
   private readonly hasSlotController = new HasSlotController(
     this,
     'help-text',
@@ -159,7 +164,21 @@ export class NileSelect extends NileElement implements NileFormControl {
   @property({ type: Boolean, reflect: true }) noWidthSync = false;
 
   /** Allows more than one option to be selected. */
-  @property({ type: Boolean, reflect: true }) multiple = false;
+  @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({ attribute: 'help-text', reflect: true }) helpText = '';
 
@@ -232,6 +251,13 @@ 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;
@@ -242,8 +268,18 @@ 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);
@@ -258,15 +294,25 @@ 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);
+      this.setCheckBoxInOption(this.multiple as boolean);
+    }
+  }
+
+  protected firstUpdated(_changedProperties: PropertyValues): void {
+    if(_changedProperties.has('multiple')) {
+      this.setCheckBoxInOption(this.multiple as boolean);
     }
   }
 
   setCheckBoxInOption(checked: boolean): void {
-    const options = this.getAllOptions();
-    options.forEach((option: NileOption) => {
+    if(!this.options.length) { 
+      this.options = this.getAllOptions();
+    }    
+    this.options.forEach((option: NileOption) => {
       option.showCheckbox = checked;
     })
   }
@@ -492,6 +538,8 @@ 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
@@ -747,7 +795,7 @@ export class NileSelect extends NileElement implements NileFormControl {
 
     // Update validity
     this.updateComplete.then(() => {
-      this.formControlController.updateValidity();
+      this.formControlController?.updateValidity();
     });
 
     this.calculateTotalWidthOfTags();
@@ -798,8 +846,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 })
@@ -902,7 +950,7 @@ export class NileSelect extends NileElement implements NileFormControl {
 
   /** Gets the associated form, if one exists. */
   getForm(): HTMLFormElement | null {
-    return this.formControlController.getForm();
+    return this.formControlController?.getForm() || null;
   }
 
   /** Checks for validity and shows the browser's validation message if the control is invalid. */
@@ -913,7 +961,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. */
@@ -986,6 +1034,10 @@ 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-select/virtual-scroll-helper.ts

@@ -0,0 +1,56 @@
+import { html } from 'lit';
+import type NileElement from '../internal/nile-element';
+
+/**
+ * Helper class to manage virtual scroll functionality for nile-select component
+ */
+export class VirtualScrollHelper {
+  private component: NileElement;
+
+  constructor(component: NileElement) {
+    this.component = component;
+  }
+
+  renderVirtualizedContent(): any {
+    const component = this.component as any;
+
+    return html`
+      <div class="virtual-select">
+        <nile-virtual-select
+          .name=${component.name}
+          .value=${component.value}
+          .placeholder=${component.placeholder}
+          .size=${component.size}
+          .searchEnabled=${component.searchEnabled}
+          .internalSearchPlaceHolder=${component.internalSearchPlaceHolder}
+          .disableLocalSearch=${component.disableLocalSearch}
+          .optionsLoading=${component.optionsLoading}
+          .multiple=${component.multiple}
+          .helpText=${component.helpText}
+          .errorMessage=${component.errorMessage}
+          .warning=${component.warning}
+          .error=${component.error}
+          .success=${component.success}
+          .disabled=${component.disabled}
+          .clearable=${component.clearable}
+          .hoist=${component.hoist}
+          .filled=${component.filled}
+          .pill=${component.pill}
+          .label=${component.label}
+          .placement=${component.placement}
+          .form=${component.form}
+          .required=${component.required}
+          .showNoResults=${component.showNoResults}
+          .noResultsMessage=${component.noResultsMessage}
+          .renderItemConfig=${component.renderItemConfig}
+          .blockValueChange=${component.blockValueChange}
+          .noWidthSync=${component.noWidthSync}
+          .maxOptionsVisible=${component.maxOptionsVisible}
+          .data=${component.data}
+        >
+          <slot name="prefix" slot="prefix"></slot>
+        </nile-virtual-select>
+      </div>
+    `;
+  }
+}

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

@@ -46,10 +46,6 @@ export const styles = css`
     /* line-height: var(--nile-type-scale-6); */
     line-height: normal;
     letter-spacing: 0.2px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    display: block;
   }
 
   ${resizableHostStyles}

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

@@ -45,8 +45,6 @@ export const styles = css`
     font-style: normal;
     /* line-height: var(--nile-type-scale-5); */
     line-height: normal;
-    text-overflow: ellipsis;
-    white-space: nowrap;
   }
 
   nile-icon {

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

@@ -27,57 +27,6 @@ export const styles = css`
   nile-table-row > slot::slotted(nile-table-cell-item:first-child) {
     color: red;
   }
-
-.row-container {
-  display: flex;
-  flex-direction: column;
-}
-
-.row {
-  cursor: default;
-  position: relative;       
-  display: flex;
-  align-items: center;
-}
-
-.row.expandable {
-  border-bottom: 1px solid var(--nile-table-row-border-color);
-}
- 
-
-.expanded-content {
-  overflow: hidden;
-  transition: max-height 0.3s ease;
-}
-
-.row.expandable .expand-icon {
-  margin-right: 4px;
-}
- 
-.row ::slotted(nile-table-cell-item),
-.row ::slotted(nile-table-header-item) {
-  flex: 1 1 0;           
-  box-sizing: border-box; 
-}
-
-
-.row-container {
-  display: flex;
-  flex-direction: column;
-}
-
-.expand-icon {
-  position: absolute;
-  left: 0.40em;            
-  top: 50%;
-  transform: translateY(-50%);
-  cursor: pointer;
-  font-size: 1em;
-  line-height: 1;
-  user-select: none;
-  z-index: 1;
-}
- 
 `;
 
 export default [styles];

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

@@ -27,6 +27,7 @@ export class NileTableRow extends NileElement {
    * The styles for TableRow
    * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
    */
+
   public static get styles(): CSSResultArray {
     return [styles];
   }
@@ -40,37 +41,6 @@ export class NileTableRow extends NileElement {
    * @slot This is a slot test
    */
 
-
-
-
-  @property({ type: Boolean, reflect: true }) expandable = false;
-
-
-  @property({ type: Boolean, reflect: true }) expanded = false;
-
-  @query('slot[name="expanded"]')
-  private _expandedSlot!: HTMLSlotElement;
-
-
- 
-private onExpandIconClick = (e: MouseEvent) => {
-  e.stopPropagation();
-  this.expanded = !this.expanded; 
-};
-
-protected updated(changedProps: Map<string, unknown>) {
-  super.updated?.(changedProps);
-  if (changedProps.has('expanded')) {
-    this.dispatchEvent(new CustomEvent('nile-change', {
-      detail: { expanded: this.expanded },
-      bubbles: true,
-      composed: true,
-    }));
-  }
-}
-
-
-
   private handleSortingAlter(event: CustomEvent) {
     const header_items: any = [
       ...this.querySelectorAll('nile-table-header-item'),
@@ -86,38 +56,16 @@ protected updated(changedProps: Map<string, unknown>) {
 
   public render(): TemplateResult {
     return html`
-      <div part="row-container" class="row-container">
-        <div
-          part="nile-row"
-          class="row ${this.expandable ? 'expandable' : ''} ${this.expanded ? 'expanded' : ''}"
-          @nile-click-sort="${this.handleSortingAlter}"
-        >
-          ${this.expandable
-            ? html`
-            <slot name="expandableIcon">
-              <nile-icon
-                class="expand-icon"
-                 name="${this.expanded ? 'chevron-up' : 'chevron-down'}"
-                @click=${this.onExpandIconClick}
-                role="button"
-                size="10"
-                aria-label="${this.expanded ? 'Collapse row' : 'Expand row'}">
-              </nile-icon> </slot>`
-            : null}
-          <slot></slot>
-        </div>
-
-        ${this.expandable && this.expanded
-          ? html`
-              <div class="expanded-content">
-                <slot name="expanded"></slot>
-              </div>`
-          : null}
-      </div>
+      <slot
+        part="nile-row"
+        @nile-click-sort="${this.handleSortingAlter}"
+      ></slot>
     `;
   }
+
   /* #endregion */
 }
+
 export default NileTableRow;
 
 declare global {

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

@@ -0,0 +1 @@
+export { NileVirtualSelect } from './nile-virtual-select';