@aquera/nile-elements 0.1.66 → 0.1.67-beta-1.2

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

@@ -1,216 +0,0 @@
-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-select/virtual-scroll-helper.ts

@@ -1,56 +0,0 @@
-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

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

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

@@ -1,119 +0,0 @@
-/**
-* Copyright Aquera Inc 2025
-*
-* 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';
-
-/**
-* Slider CSS
-*/
-export const styles = css`
-  :host {
-    display: block;
-  }
-
-  .container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: 10px;
-    height: 100px;
-  }
-
-  .align-item-center {
-    align-items: center;
-  }
-
-  slot.span {
-    font-size: var(--nile-font-size-micro);
-    margin-top: 14px;
-  }
-
-  .range-container {
-    display: flex;
-    flex-direction: column;
-    gap: var(--nile-spacing-sm);
-  }
-
-  .column-reverse {
-    flex-direction: column-reverse;
-  }
-
-  .label-container {
-    display: flex;
-    justify-content: space-between;
-  }
-
-  .label-container span {
-    margin: var(--nile-spacing-none);
-    padding: var(--nile-spacing-none);
-    font-size: var(--nile-font-size-micro);
-  }
-
-  .range {
-    position: relative;
-    width: 228px;
-    height: 4px;
-    background-color: var(--nile-colors-neutral-400);
-    user-select: none;
-    border-radius: var(--nile-radius-radius-3xl);
-  }
-
-  .range:hover {
-    cursor: pointer;
-  }
-
-  .range-completed {
-    position: absolute;
-    height: 100%;
-    width: 0%;
-    background-color: var(--nile-colors-primary-600);
-    top: 0px;
-    left: 0px;
-    z-index: 98;
-    border-radius: var(--nile-radius-radius-3xl);
-  }
-
-  .range-button {
-    height: 12px;
-    width: 12px;
-    background-color: var(--nile-colors-primary-600);
-    position: absolute;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    border-radius: var(--nile-radius-radius-3xl);
-    left: 0;
-    z-index: 100;
-    box-shadow: rgba(0, 82, 145, 0.1) 0px 1px 2px 0px, rgba(0, 94, 166, 0.15) 0px 0px 0px 2px;
-    transition: box-shadow var(--nile-transition-duration-default) ease;
-  }
-
-  .range-button:hover, .range-button-two:hover {
-    cursor: pointer;
-    background-color: var(--nile-colors-primary-700);
-  }
-
-  .range-button:active, .range-button-two:active {
-    transition: box-shadow var(--nile-transition-duration-default) ease;
-    background-color: var(--nile-colors-primary-700);
-    box-shadow: rgba(0, 82, 145, 0.1) 0px 1px 2px 0px, rgba(0, 94, 166, 0.15) 0px 0px 0px 4px;
-  }
-
-  .range-button-two {
-    height: 12px;
-    width: 12px;
-    background-color: var(--nile-colors-primary-600);
-    position: absolute;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    border-radius: var(--nile-radius-radius-3xl);
-    left: 100%;
-    z-index: 100;
-    box-shadow: rgba(0, 82, 145, 0.1) 0px 1px 2px 0px, rgba(0, 94, 166, 0.15) 0px 0px 0px 2px;
-    transition: box-shadow var(--nile-transition-duration-default) ease;
-  }
-`;
-
-export default [styles];

package/src/nile-slider/nile-slider.template.ts

@@ -1,77 +0,0 @@
-import { TemplateResult, html } from 'lit';
-import NileSlider from './nile-slider';
-import { classMap } from 'lit/directives/class-map.js';
-
-export const rangeSlider = (nileSlider: NileSlider): TemplateResult => {
-  return html`
-    <div>
-      <nile-tooltip
-        content=${nileSlider.rangeOneValue}
-        placement=${nileSlider.tooltipPosition}
-      >
-        <div 
-          id="range-one" 
-          class="range-button"
-          part="range-button"
-          role="slider"
-          tabindex="0"
-          aria-valuemin=${nileSlider.minValue}
-          aria-valuemax=${nileSlider.maxValue}
-          aria-valuenow=${nileSlider.rangeOneValue}
-          aria-label="Minimum value"
-        ></div>
-      </nile-tooltip>
-      <nile-tooltip
-        content=${nileSlider.rangeTwoValue}
-        placement=${nileSlider.tooltipPosition}
-      >
-        <div
-          id="range-two"
-          class="range-button-two"
-          part="range-button-two"
-          role="slider"
-          tabindex="0"
-          aria-valuemin=${nileSlider.minValue}
-          aria-valuemax=${nileSlider.maxValue}
-          aria-valuenow=${nileSlider.rangeTwoValue}
-          aria-label="Maximum value"
-        ></div>
-      </nile-tooltip>
-    </div>
-  `;
-};
-
-export const singleSlider = (nileSlider: NileSlider): TemplateResult => {
-  return html`
-    <div>
-      <nile-tooltip
-        content=${nileSlider.value}
-        placement=${nileSlider.tooltipPosition}
-      >
-        <div 
-          class=${classMap({
-            'range-button': true,
-            'range-button-active': nileSlider.activeThumb === 'one',
-          })} 
-          part="range-button"
-          role="slider"
-          tabindex="0"
-          aria-valuemin=${nileSlider.minValue}
-          aria-valuemax=${nileSlider.maxValue}
-          aria-valuenow=${nileSlider.value}
-          aria-label=${nileSlider.ariaLabel || "Slider value"}
-        ></div>
-      </nile-tooltip>
-    </div>
-  `;
-};
-
-
-export const lableContaier = (nileSlider: NileSlider): TemplateResult => {
-  return html`
-    <div part="label-container" class="label-container">
-      <span id="label-start">${nileSlider.labelStart}</span>
-      <span id="label-end">${nileSlider.labelEnd}</span>
-    </div>
-  `;
-};

package/src/nile-slider/nile-slider.ts

@@ -1,215 +0,0 @@
-/**
- * Copyright Aquera Inc 2025
- *
- * 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 { styles } from './nile-slider.css';
-import NileElement from '../internal/nile-element';
-import { classMap } from 'lit/directives/class-map.js';
-import { html, CSSResultArray, TemplateResult } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { TooltipPosition } from './types/nile-slider.types';
-import { NileSliderEvents } from './types/nile-slider.enums';
-import { rangeSlider, singleSlider, lableContaier } from './nile-slider.template';
-import { 
-  handleSingleSlider, 
-  handleRangeOne, 
-  handleRangeTwo, 
-  getHtmlElements, 
-  removeMoveListeners,
-  valueToPercent,
-  handleTwoThumbClick,
-  addMoveListeners
-} from './utils/nile-slider.utils'
-
-/** 
- * Nile slider component.
- *
- * @tag nile-slider
- */
-@customElement('nile-slider')
-export class NileSlider extends NileElement {
-  public static get styles(): CSSResultArray {
-    return [styles];
-  }
-
-  @property({ type: Number }) minValue: number = 0;
-  @property({ type: Number }) value: number = this.minValue;
-  @property({ type: Number }) maxValue: number = 100;
-  @property({ type: Number }) rangeOneValue: number = this.minValue;
-  @property({ type: Number }) rangeTwoValue: number = this.maxValue;
-  @property({ type: Boolean}) showLabel: boolean = false;
-  @property({ type: String }) labelStart: string = "";
-  @property({ type: String }) labelEnd: string = "";
-  @property({ type: Boolean}) rangeSlider: boolean = false;
-  @property({ type: String }) labelPosition: string = "top";
-  @property({ type: String }) tooltipPosition: TooltipPosition = "top";
-
-  public buttonOne!: HTMLElement;
-  public buttonTwo!: HTMLElement;
-  public range!: HTMLElement;
-  public completed!: HTMLElement;
-  public activeThumb: 'one' | 'two' | null = null;
-
-  connectedCallback(): void {
-    super.connectedCallback();
-    this.emit(NileSliderEvents.NILE_INIT); 
-
-    if(this.rangeSlider) {
-      this.checkRangeValidity();
-    }
-  }
-
-  firstUpdated(changedProps: Map<string, any>): void {
-    getHtmlElements(this);
-
-    if (!this.rangeSlider && changedProps.has('value')) {
-      this.value = this.checkValueValidity(this.value, this.minValue, this.maxValue);
-      const percent = valueToPercent(this.value, this);
-      
-      this.buttonOne.style.left = `${percent}%`;
-      this.completed.style.width = `${percent}%`;
-    } else if (this.rangeSlider) {
-      
-      const percentOne = valueToPercent(this.rangeOneValue, this);
-      const percentTwo = valueToPercent(this.rangeTwoValue, this);
-      
-      if (this.buttonOne) this.buttonOne.style.left = `${percentOne}%`;
-      if (this.buttonTwo) this.buttonTwo.style.left = `${percentTwo}%`;
-      
-      const left = Math.min(percentOne, percentTwo);
-      const width = Math.abs(percentTwo - percentOne);
-      
-      this.completed.style.left = `${left}%`;
-      this.completed.style.width = `${width}%`;
-    }
-  }
-
-  checkValueValidity(value: number, min: number, max: number): number {
-    if(max - min <= 1) { 
-      return Math.max(min, Math.min(value, max));
-    }
-    return Math.floor(Math.max(min, Math.min(value, max)));
-  }
-
-  checkRangeValidity(): void {
-    if(this.rangeTwoValue > this.maxValue) {
-      this.rangeTwoValue = this.maxValue;
-    } else if(this.rangeTwoValue < this.rangeOneValue) {
-      this.rangeTwoValue = this.rangeOneValue;
-    }
-
-    if(this.rangeOneValue < this.minValue) {
-      this.rangeOneValue = this.minValue;
-    } else if(this.rangeOneValue > this.rangeTwoValue) {
-      this.rangeOneValue = this.rangeTwoValue;
-    }
-  }  
-
-  public onMouseMove = (e: MouseEvent): void => {
-    const rect = this.range.getBoundingClientRect();
-
-    if (!this.rangeSlider) {
-      handleSingleSlider(e, rect, this);
-    } else {
-      if (this.activeThumb === 'one') {
-        handleRangeOne(e, rect, this);
-      } else if (this.activeThumb === 'two') {
-        handleRangeTwo(e, rect, this);
-      }
-
-      const start = valueToPercent(this.rangeOneValue, this);
-      const end = valueToPercent(this.rangeTwoValue, this);
-      const left = Math.min(start, end);
-      const width = Math.abs(end - start);
-
-      if(this.rangeTwoValue >= this.rangeOneValue) {
-        this.completed.style.left = `${left}%`;
-        this.completed.style.width = `${width}%`;
-      }
-    }
-  };
-
-  public onMouseUp = (): void => {
-    if(!this.rangeSlider) this.emit(NileSliderEvents.NILE_CHANGE_END, { value: this.value });
-    else {
-      this.emit(NileSliderEvents.NILE_BUTTON_FIRST_CHANGE_END, { value: this.rangeOneValue });
-      this.emit(NileSliderEvents.NILE_BUTTON_LAST_CHANGE_END, { value: this.rangeTwoValue });
-    }
-    this.activeThumb = null;
-    removeMoveListeners(this);
-  };
-
-  public onMouseDown = (e: MouseEvent): void => {
-    const rect = this.range.getBoundingClientRect();
-    const clickX = e.clientX - rect.left;
-    const percent = (clickX / rect.width) * 100;
-    const value = this.minValue + (percent / 100) * (this.maxValue - this.minValue);
-  
-    if (!this.rangeSlider) {
-      handleSingleSlider(e, rect, this);
-      this.activeThumb = 'one';
-      addMoveListeners(this);
-    } else {
-      handleTwoThumbClick(value, this);
-      const distToOne = Math.abs(value - this.rangeOneValue);
-      const distToTwo = Math.abs(value - this.rangeTwoValue);
-      this.activeThumb = distToOne <= distToTwo ? 'one' : 'two';
-      addMoveListeners(this);
-    }
-  };
-
-  public render(): TemplateResult {
-    const hasLabels = this.showLabel;
-    const ariaLabelledby = hasLabels ? 'label-start label-end' : undefined;
-  
-    return html`
-      <div
-        part="base"
-        class=${classMap({
-          'container': true,
-          'align-item-center': !hasLabels
-        })}
-      >
-        <slot class="span" name="prefix"></slot>
-  
-        <div
-          part="range-container"
-          class=${classMap({
-            'range-container': true,
-            'column-reverse': this.labelPosition === 'bottom'
-          })}
-        >
-          ${hasLabels ? lableContaier(this) : html``}
-  
-          <div
-            class="range"
-            part="range"
-            role="group"
-            aria-labelledby=${ariaLabelledby}
-          >
-            <span class="range-completed" part="range-completed"></span>
-            ${this.rangeSlider ? rangeSlider(this) : singleSlider(this)}
-          </div>
-        </div>
-  
-        <slot class="span" name="suffix"></slot>
-      </div>
-    `;
-  }  
-
-  disconnectedCallback(): void {
-    super.disconnectedCallback();
-    this.emit(NileSliderEvents.NILE_DESTROY);
-  }
-}
-
-export default NileSlider;
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'nile-slider': NileSlider;
-  }
-}

package/src/nile-slider/types/nile-slider.enums.ts

@@ -1,10 +0,0 @@
-export const enum NileSliderEvents {
-  NILE_INIT = "nile-init",
-  NILE_CHANGE = "nile-change",
-  NILE_CHANGE_END = "nile-change-end",
-  NILE_BUTTON_FIRST_CHANGE = "nile-button-first-change",
-  NILE_BUTTON_LAST_CHANGE =  "nile-button-last-change",
-  NILE_BUTTON_FIRST_CHANGE_END = "nile-button-first-change-end",
-  NILE_BUTTON_LAST_CHANGE_END =  "nile-button-last-change-end",
-  NILE_DESTROY = "nile-destroy", 
-}