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

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

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

@@ -0,0 +1,215 @@
+/**
+ * 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

@@ -0,0 +1,10 @@
+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", 
+}

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

@@ -0,0 +1,13 @@
+export type TooltipPosition =
+  | 'top'
+  | 'top-start'
+  | 'top-end'
+  | 'right'
+  | 'right-start'
+  | 'right-end'
+  | 'bottom'
+  | 'bottom-start'
+  | 'bottom-end'
+  | 'left'
+  | 'left-start'
+  | 'left-end';

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

@@ -0,0 +1,136 @@
+import NileSlider from '../nile-slider';
+import { NileSliderEvents } from '../types/nile-slider.enums';
+
+export const getClampedPercent = (
+  rect: DOMRect,
+  x: number,
+): number => {
+  const clampedX = Math.max(0, Math.min(x, rect.width)); 
+  const percent = (clampedX / rect.width) * 100;
+  return percent;
+};
+
+export const percentToValue = (percent: number, nileSlider: NileSlider): number => {
+  const value = nileSlider.minValue + (percent / 100) * (nileSlider.maxValue - nileSlider.minValue);
+  if(nileSlider.maxValue - nileSlider.minValue < 1) {
+    return parseFloat(value.toFixed(2));
+  } else {
+    return Math.floor(value);
+  }
+};
+
+export const valueToPercent = (value: number, nileSlider: NileSlider): number => {
+  return ((value - nileSlider.minValue) / (nileSlider.maxValue - nileSlider.minValue)) * 100;
+};
+
+export const handleSingleSlider = (
+  e: MouseEvent,
+  rect: DOMRect,
+  nileSlider: NileSlider
+): void => {
+  const x = e.clientX - rect.left;
+  const percent = getClampedPercent(rect, x);
+  nileSlider.value = percentToValue(percent, nileSlider);
+  nileSlider.emit(NileSliderEvents.NILE_CHANGE, { value: nileSlider.value });
+  nileSlider.buttonOne.style.left = `${percent}%`;
+  nileSlider.completed.style.width = `${percent}%`;
+};
+
+export const handleRangeOne = (
+  e: MouseEvent,
+  rect: DOMRect,
+  nileSlider: NileSlider
+): void => {
+  const x = e.clientX - rect.left;
+  const percent = getClampedPercent(rect, x);
+  nileSlider.rangeOneValue = percentToValue(percent, nileSlider);
+  nileSlider.rangeOneValue = Math.min(nileSlider.rangeOneValue, nileSlider.rangeTwoValue);
+  nileSlider.emit(NileSliderEvents.NILE_BUTTON_FIRST_CHANGE, {
+    value: nileSlider.rangeOneValue,
+  });
+  if (nileSlider.rangeTwoValue > nileSlider.rangeOneValue) {
+    nileSlider.buttonOne.style.left = `${percent}%`;
+  }
+};
+
+export const handleRangeTwo = (
+  e: MouseEvent,
+  rect: DOMRect,
+  nileSlider: NileSlider
+): void => {
+  const x = e.clientX - rect.left;
+  const percent = getClampedPercent(rect, x);
+  nileSlider.rangeTwoValue = percentToValue(percent, nileSlider);
+  nileSlider.rangeTwoValue = Math.max(nileSlider.rangeTwoValue, nileSlider.rangeOneValue);
+  nileSlider.emit(NileSliderEvents.NILE_BUTTON_LAST_CHANGE, {
+    value: nileSlider.rangeTwoValue,
+  });
+
+  if (nileSlider.rangeTwoValue > nileSlider.rangeOneValue) {
+    nileSlider.buttonTwo.style.left = `${percent}%`;
+  }
+};
+
+export const getHtmlElements = (nileSlider: NileSlider) => {
+  nileSlider.range = nileSlider.renderRoot.querySelector('.range') as HTMLElement;
+  nileSlider.buttonOne = nileSlider.renderRoot.querySelector('.range-button') as HTMLElement;
+  nileSlider.buttonTwo = nileSlider.renderRoot.querySelector('.range-button-two') as HTMLElement;
+  nileSlider.completed = nileSlider.renderRoot.querySelector('.range-completed') as HTMLElement;
+
+  nileSlider.range.addEventListener('mousedown', nileSlider.onMouseDown);
+
+  nileSlider.buttonOne?.addEventListener('mousedown', () => {
+    nileSlider.activeThumb = 'one';
+    addMoveListeners(nileSlider);
+  });
+
+  nileSlider.buttonTwo?.addEventListener('mousedown', () => {
+    nileSlider.activeThumb = 'two';
+    addMoveListeners(nileSlider);
+  });
+};
+
+export const addMoveListeners = (nileSlider: NileSlider): void => {
+  window.addEventListener('mousemove', nileSlider.onMouseMove);
+  window.addEventListener('mouseup', nileSlider.onMouseUp);
+};
+
+export const removeMoveListeners = (nileSlider: NileSlider): void => {
+  window.removeEventListener('mousemove', nileSlider.onMouseMove);
+  window.removeEventListener('mouseup', nileSlider.onMouseUp);
+};
+
+export const handleTwoThumbClick = (
+  value: number,
+  nileSlider: NileSlider
+): void => {
+  const distToOne = Math.abs(value - nileSlider.rangeOneValue);
+  const distToTwo = Math.abs(value - nileSlider.rangeTwoValue);
+
+  if (distToOne <= distToTwo) {
+    const clamped = Math.min(value, nileSlider.rangeTwoValue);
+    nileSlider.rangeOneValue = nileSlider.checkValueValidity(clamped, nileSlider.minValue, nileSlider.maxValue);
+  } else {
+    const clamped = Math.max(value, nileSlider.rangeOneValue);
+    nileSlider.rangeTwoValue = nileSlider.checkValueValidity(clamped, nileSlider.minValue, nileSlider.maxValue);
+  }  
+
+  const percentOne = valueToPercent(nileSlider.rangeOneValue, nileSlider);
+  const percentTwo = valueToPercent(nileSlider.rangeTwoValue, nileSlider);
+
+  nileSlider.buttonOne.style.left = `${percentOne}%`;
+  nileSlider.buttonTwo.style.left = `${percentTwo}%`;
+
+  const left = Math.min(percentOne, percentTwo);
+  const width = Math.abs(percentTwo - percentOne);
+
+  nileSlider.completed.style.left = `${left}%`;
+  nileSlider.completed.style.width = `${width}%`;
+
+  nileSlider.emit(NileSliderEvents.NILE_BUTTON_FIRST_CHANGE, {
+    value: nileSlider.rangeOneValue,
+  });
+  nileSlider.emit(NileSliderEvents.NILE_BUTTON_LAST_CHANGE, {
+    value: nileSlider.rangeTwoValue,
+  });
+};

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

@@ -6,6 +6,7 @@
  */
 
 import { css } from 'lit';
+import { tableLayoutStyles } from '../internal/resizable-table-styles';
 
 /**
  * TableBody CSS
@@ -48,6 +49,8 @@ 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,6 +24,7 @@ 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.
@@ -46,6 +47,7 @@ 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];
@@ -67,6 +69,10 @@ 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) => {
@@ -88,6 +94,8 @@ export class NileTableBody extends NileElement {
         row_data = [];
       }
     });
+    
+    this.checkForResizableColumns();
   }
 
   private handleSort(e: any) {
@@ -115,6 +123,7 @@ 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,6 +6,7 @@
  */
 
 import { css } from 'lit';
+import { resizableHostStyles, resizerStyles, resizableSlotStyles } from '../internal/resizable-table-styles';
 
 /**
  * TableCellItem CSS
@@ -19,11 +20,20 @@ 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);
@@ -37,6 +47,10 @@ export const styles = css`
     line-height: normal;
     letter-spacing: 0.2px;
   }
+
+  ${resizableHostStyles}
+  ${resizerStyles}
+  ${resizableSlotStyles}
 `;
 
 export default [styles];

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

@@ -15,6 +15,7 @@ import { customElement, property } from 'lit/decorators.js';
 import { styles } from './nile-table-cell-item.css';
 import NileElement from '../internal/nile-element';
 import { HasSlotController } from '../internal/slot';
+import { createResizeHandler } from '../internal/resizable-table-helper';
 
 /**
  * Nile table Cell Item component.
@@ -33,20 +34,36 @@ export class NileTableCellItem extends NileElement {
     return [styles];
   }
 
+  /** Enables the resize functionality. */
+  @property({ type: Boolean, reflect: true }) resizable = false;
+
   /* #endregion */
 
   /* #region Methods */
 
+  private handleResizeStart = createResizeHandler(this, 50);
+
   /**
    * Render method
    * @slot This is a slot test
    */
   public render(): TemplateResult {
-    return html`
-      ${this.hasSlotController.test('[default]')
-        ? html` <slot class="column" part="nile__table-cell"> </slot>`
-        : ''}
-    `;
+    if (this.resizable) {
+      return html`
+        <div class="cell__wrapper" part="nile__table-cell">
+          ${this.hasSlotController.test('[default]')
+            ? html` <div class="column" part="nile__table-cell"><slot></slot></div>`
+            : ''}
+          <div class="resizer" @mousedown=${this.handleResizeStart}></div>
+        </div>
+      `;
+    } else {
+      return html`
+        ${this.hasSlotController.test('[default]')
+          ? html` <slot class="column" part="nile__table-cell"> </slot>`
+          : ''}
+      `;
+    }
   }
 
   /* #endregion */

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

@@ -6,6 +6,7 @@
  */
 
 import { css } from 'lit';
+import { resizableHeaderStyles, headerResizerStyles } from '../internal/resizable-table-styles';
 
 /**
  * TableHeaderItem CSS
@@ -67,6 +68,9 @@ export const styles = css`
   .headers:hover .hover__arrow {
     opacity: 0.3;
   }
+
+  ${resizableHeaderStyles}
+  ${headerResizerStyles}
 `;
 
 export default [styles];

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

@@ -15,6 +15,7 @@ import { customElement, state, property } from 'lit/decorators.js';
 import { styles } from './nile-table-header-item.css';
 import NileElement from '../internal/nile-element';
 import { HasSlotController } from '../internal/slot';
+import { createResizeHandler } from '../internal/resizable-table-helper';
 
 /**
  * Nile icon component.
@@ -43,6 +44,9 @@ export class NileTableHeaderItem extends NileElement {
   @property({ type: String, reflect: true, attribute: 'icon-name' }) iconName =
     '';
 
+  /** Enables the resize functionality. */
+  @property({ type: Boolean, reflect: true }) resizable = false;
+
   @state() sorting_ct = 0;
 
   /* #endregion */
@@ -66,9 +70,10 @@ export class NileTableHeaderItem extends NileElement {
     this.emit('nile-search', { value: e.detail.value });
   }
 
+  private handleResizeStart = createResizeHandler(this, 50);
+
   public render(): TemplateResult {
-    return html` ${this.hasSlotController.test('[default]')
-      ? html`
+    return html`
       <div class="header__item__wrapper" part="nile__table-header-cell">
         <div class="headers">
           <slot> </slot>
@@ -109,10 +114,11 @@ export class NileTableHeaderItem extends NileElement {
               </nile-popover>`
             : html``}
         </div>
-      </div>`
-      : null}`;
+        ${this.resizable 
+          ? html`<div class="resizer" @mousedown=${this.handleResizeStart}></div>`
+          : null}
+      </div>`;
   }
-  /* #endregion */
 }
 
 export default NileTableHeaderItem;

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

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