@aquera/nile-elements 0.1.46-beta-2.5 → 0.1.47-beta-1.2

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

@@ -1,112 +0,0 @@
-/**
- * Copyright Aquera Inc 2023
- *
- * This source code is licensed under the BSD-3-Clause license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { css } from 'lit';
-
-/**
- * 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-white-base);
-	  border-radius: var(--nile-radius-radius-3xl);
-  }
-
-  .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 4px;
-  }
-
-  .range-button:hover, .range-button-two:hover {
-    cursor: grab;
-    background-color: var(--nile-colors-primary-700);
-  }
-
-  .range-button:active, .range-button-two:active {
-    cursor: grabbing;
-    background-color: var(--nile-colors-primary-700);
-  }
-
-  .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 4px;
-  }
-`;
-
-export default [styles];

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

@@ -1,47 +0,0 @@
-import { TemplateResult, html } from 'lit';
-import NileSlider from './nile-slider';
-
-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"></div>
-      </nile-tooltip>
-      <nile-tooltip
-        content=${nileSlider.rangeTwoValue}
-        placement=${nileSlider.tooltipPosition}
-      >
-        <div
-          id="range-two"
-          class="range-button-two"
-          part="range-button-two"
-        ></div>
-      </nile-tooltip>
-    </div>
-  `;
-};
-
-export const singleSlider = (nileSlider: NileSlider): TemplateResult => {
-  return html`
-    <div>
-      <nile-tooltip
-        content=${nileSlider.value}
-        placement=${nileSlider.tooltipPosition}
-      >
-        <div class="range-button" part="range-button"></div>
-      </nile-tooltip>
-    </div>
-  `;
-};
-
-export const lableContaier = (nileSlider: NileSlider): TemplateResult => {
-  return html`
-    <div part="label-container" class="label-container">
-      <span>${nileSlider.labelStart}</span>
-      <span>${nileSlider.labelEnd}</span>
-    </div>
-  `;
-}

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

@@ -1,177 +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
-} 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 }) value: number = 0;
-  @property({ type: Number }) minValue: number = 0;
-  @property({ type: Number }) maxValue: number = 0;
-  @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); 
-  }
-
-  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 && changedProps.has('rangeOneValue') || changedProps.has('rangeTwoValue')) {
-      this.rangeOneValue = this.checkValueValidity(this.rangeOneValue, this.minValue, this.maxValue);
-      this.rangeTwoValue = this.checkValueValidity(this.rangeTwoValue, this.minValue, this.maxValue);
-
-      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 {
-    return Math.max(min, Math.min(value, max));
-  }
-
-  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 onMouseClick = (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);
-    } else {
-      handleTwoThumbClick(value, this);
-    }
-  };
-  
-
-  public render(): TemplateResult {
-    return html`
-      <div part="base" class=${classMap({
-        container: true,
-        'align-item-center': !this.showLabel
-      })}>
-        <slot class="span" name="prefix"></slot>
-        <div part="range-container" class=${classMap({
-          'range-container': true,
-          'column-reverse': this.labelPosition === "bottom"
-        })}>
-          ${this.showLabel
-            ? lableContaier(this)
-            : html``}
-          <div class="range" part="range">
-            <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",
-}

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

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

@@ -1,118 +0,0 @@
-import NileSlider from '../nile-slider';
-import { NileSliderEvents } from '../types/nile-slider.enums';
-
-export const getClampedPercent = (rect: DOMRect, x: number): number => {
-  const clamped = Math.max(0, Math.min(x, rect.width));
-  return (clamped / rect.width) * 100;
-};
-
-export const percentToValue = (percent: number, nileSlider: NileSlider): number => {
-  return Math.floor((percent / 100) * nileSlider.maxValue);
-};
-
-export const valueToPercent = (value: number, nileSlider: NileSlider): number => {
-  return (value / nileSlider.maxValue) * 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.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.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('click', nileSlider.onMouseClick);
-
-  nileSlider.buttonOne?.addEventListener('mousedown', () => {
-    nileSlider.activeThumb = 'one';
-    addMoveListeners(nileSlider);
-  });
-
-  nileSlider.buttonTwo?.addEventListener('mousedown', () => {
-    nileSlider.activeThumb = 'two';
-    addMoveListeners(nileSlider);
-  });
-};
-
-export const addMoveListeners = (nileSlider: NileSlider): void => {
-  nileSlider.range.addEventListener('mousemove', nileSlider.onMouseMove);
-  nileSlider.range.addEventListener('mouseup', nileSlider.onMouseUp);
-};
-
-export const removeMoveListeners = (nileSlider: NileSlider): void => {
-  nileSlider.range.removeEventListener('mousemove', nileSlider.onMouseMove);
-  nileSlider.range.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) {
-    nileSlider.rangeOneValue = Math.floor(nileSlider.checkValueValidity(value, nileSlider.minValue, nileSlider.maxValue));
-  } else {
-    nileSlider.rangeTwoValue = Math.floor(nileSlider.checkValueValidity(value, 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,
-  });
-};