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

package/src/internal/resizable-table-styles.ts

@@ -0,0 +1,144 @@
+/**
+ * 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';
+
+/**
+ * Resizable Styles Utility
+ * Centralized styles for resizable table functionality
+ */
+
+export const resizableHostStyles = css`
+  :host([resizable]) {
+    position: relative;
+    overflow: hidden;
+    table-layout: fixed;
+  }
+`;
+
+export const resizableHeaderStyles = css`
+  :host([resizable]) {
+    position: relative;
+  }
+
+  :host([resizable]) .header__item__wrapper {
+    border-right: 1px solid var(--nile-colors-neutral-400);
+    position: relative;
+  }
+`;
+
+export const resizerStyles = css`
+  .resizer {
+    position: absolute;
+    right: 0;
+    top: -1000px;
+    bottom: -1000px;
+    width: 8px;
+    cursor: col-resize;
+    user-select: none;
+    background-color: var(--nile-colors-neutral-100);
+    transition: background-color 0.2s;
+    z-index: 10;
+    opacity: 0;
+    transition: opacity 0.2s ease;
+    pointer-events: none;
+  }
+
+  :host([resizable]):hover .resizer {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  .resizer::before {
+    content: '';
+    position: absolute;
+    right: 3px;
+    top: 0;
+    width: 2px;
+    height: 100%;
+    background-color: var(--nile-colors-neutral-500);
+    opacity: 0.8;
+  }
+
+  .resizer:hover {
+    background-color: var(--nile-colors-neutral-400);
+  }
+
+  .resizer:hover::before {
+    background-color: var(--nile-colors-neutral-700);
+    opacity: 1;
+  }
+
+  .resizer.resizing {
+    background-color: var(--nile-colors-neutral-400);
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  .resizer.resizing::before {
+    background-color: var(--nile-colors-neutral-700);
+    opacity: 1;
+    width: 3px;
+  }
+`;
+
+export const headerResizerStyles = css`
+  .resizer {
+    position: absolute;
+    right: -2px;
+    top: -1000px;
+    bottom: -1000px;
+    width: 8px;
+    cursor: ew-resize;
+    user-select: none;
+    transition: background-color 0.2s;
+    z-index: 10;
+    opacity: 0;
+    transition: opacity 0.2s ease;
+  }
+
+  :host([resizable]):hover .resizer {
+    opacity: 1;
+  }
+
+  .resizer::before {
+    content: '';
+    position: absolute;
+    height: 100%;
+    opacity: 0.8;
+  }
+
+  .resizer.resizing {
+    border-right: 4px double var(--nile-colors-neutral-400);
+    background-color: transparent;
+    opacity: 1;
+  }
+`;
+
+export const resizableSlotStyles = css`
+  :host([resizable]) ::slotted(*) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: block;
+  }
+
+  :host([resizable]) ::slotted(span),
+  :host([resizable]) ::slotted(div),
+  :host([resizable]) ::slotted(p) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: block;
+  }
+`;
+
+export const tableLayoutStyles = css`
+  .nile__table__body[resizable] {
+    table-layout: fixed;
+  }
+`; 

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

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

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

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

@@ -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';