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

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-icon/icons/svg/index.ts

@@ -42,8 +42,6 @@ export { default as barchart } from './bar-chart';
 export { default as bargraph } from './bargraph';
 export { default as block } from './block';
 export { default as bluedot } from './bluedot';
-export { default as boldtry } from './bold-try';
-export { default as bold } from './bold';
 export { default as bookclosed } from './book-closed';
 export { default as boolean } from './boolean';
 export { default as border_all } from './border_all';
@@ -57,7 +55,6 @@ export { default as buttonloadingwhite } from './button-loading-white';
 export { default as calendar } from './calendar';
 export { default as cases } from './cases';
 export { default as cellloader } from './cell-loader';
-export { default as centeralign } from './center-align';
 export { default as certification } from './certification';
 export { default as checkcircle } from './check-circle';
 export { default as checkdone01 } from './check-done-01';
@@ -225,9 +222,7 @@ export { default as inprogress } from './inprogress';
 export { default as insertatcursor } from './insert-at-cursor';
 export { default as integer } from './integer';
 export { default as intersection } from './intersection';
-export { default as itallic } from './itallic';
 export { default as js } from './js';
-export { default as justifyalign } from './justify-align';
 export { default as keyperformanceindicator } from './key-performance-indicator';
 export { default as keyboard01 } from './keyboard-01';
 export { default as keyword } from './keyword';
@@ -236,7 +231,6 @@ export { default as laptop01 } from './laptop-01';
 export { default as layersthree02 } from './layers-three-02';
 export { default as layoutalt02 } from './layout-alt-02';
 export { default as layoutalt03 } from './layout-alt-03';
-export { default as leftalign } from './left-align';
 export { default as leftjoin } from './left-join';
 export { default as leftunion } from './left-union';
 export { default as leftpointarrow } from './leftpointarrow';
@@ -277,15 +271,6 @@ export { default as mute } from './mute';
 export { default as myintegration } from './my-integration';
 export { default as newcalendar } from './new-calendar';
 export { default as nightingalechart } from './nightingale-chart';
-export { default as nilebold } from './nile-bold';
-export { default as nilecenteralign } from './nile-centeralign';
-export { default as nileitalic } from './nile-italic';
-export { default as nilejustify } from './nile-justify';
-export { default as nileleftalign } from './nile-leftalign';
-export { default as nileol } from './nile-ol';
-export { default as nilerightalign } from './nile-rightalign';
-export { default as nileul } from './nile-ul';
-export { default as nileunderline } from './nile-underline';
 export { default as nlp } from './nlp';
 export { default as nomatch } from './nomatch';
 export { default as note } from './note';
@@ -297,7 +282,6 @@ export { default as number } from './number';
 export { default as numberinput } from './numberinput';
 export { default as numbers } from './numbers';
 export { default as object } from './object';
-export { default as ol } from './ol';
 export { default as operators } from './operators';
 export { default as options } from './options';
 export { default as orchestrationsolid } from './orchestration-solid';
@@ -359,7 +343,6 @@ export { default as resource_analysis } from './resource_analysis';
 export { default as resource_graph } from './resource_graph';
 export { default as restart_alt } from './restart_alt';
 export { default as revocationcycle } from './revocation-cycle';
-export { default as rightalign } from './right-align';
 export { default as rightjoin } from './right-join';
 export { default as rightunion } from './right-union';
 export { default as rocket02 } from './rocket-02';
@@ -425,8 +408,6 @@ export { default as timezone } from './timezone';
 export { default as transaction_monitor } from './transaction_monitor';
 export { default as trendup02 } from './trend-up-02';
 export { default as trigger } from './trigger';
-export { default as ul } from './ul';
-export { default as underline } from './underline';
 export { default as undo02 } from './undo-02';
 export { default as undo } from './undo';
 export { default as union } from './union';

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-slider/index.ts

@@ -0,0 +1 @@
+export { NileSlider } from './nile-slider';